Forum HTML Templates TopClass Hide & show sections in @print

This topic contains 5 replies, has 2 voices, and was last updated by  Labluzzaman 2 years ago.

  • Author
    Posts
  • #9493

    Majoal
    Customer
    Posts: 13

    Hi again:

    How are you? I’d like to ask for you help.

    I’d like to have a “<div class=”new_class_name”> bla bla bla </div> section that shows when I want to print it only.

    This section may be hidden when the page is show on screen, but it appears when you print it.

    Thanks for your support.

    my url is: http://www.undemursgr.es

  • #9495

    Labluzzaman
    Support
    Posts: 574

    Hi Majoal,
    Please follow this article and you will understand that what you need to do.

    How To Set Up A Print Style Sheet

    Thanks.

  • #9529

    Majoal
    Customer
    Posts: 13

    Hi:

    First of all, thanks for this article. It is very useful.

    I’ve been able to hide sections when I print a page but I can’t show a “<div> …. </div>” only in @media print.

    For example:

    index.html
    ———-
    <div class=”show-only-print”> Hello world” </div>

    bootstrap.min.css
    —————–
    @media screen{.show-only-print {display: none !important}}

    I’ve tried to write the same code in other files like “responsive.css” and “style.css”, but it still doesn’t work.

    Thanks for your support.

  • #9533

    Labluzzaman
    Support
    Posts: 574

    Hi Majoal,
    It works same as media screen for responsive. Here follow the link and it will be clear about use print.
    https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en

    Thanks.

  • #9550

    Majoal
    Customer
    Posts: 13

    Can you tell me what is the css file that I have to modify?

    Thanks

    • #9554

      Labluzzaman
      Support
      Posts: 574

      Hi Majoal,
      You have to use a different stylesheet for print. Like In this stylesheet you can style anything whatever you want. In media queries set as like this

      @media print and (max-width=”widthpx”) {

      }
      Hope you problem will be solve by following this process.
      Thanks.

You must be logged in to reply to this topic.