Navigation
Archive / hide row based on screen size
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • September 21, 2016 at 2:58 pm #1185340
    fullframenw
    Participant

    Hello! I have a set of rows, 1/4, 1/2 and 1/4 where my content is all in the center column. The left and right columns are just additional content for looks. The problem is on mobile: once the layout is viewed in a smaller screen, the two empty columns are “stacked” above and under the 1/2 column.

    Is there a way to hide specific rows based on screen sizes? I know it can be done with columns, but this is a row problem.

    September 21, 2016 at 2:59 pm #1185345
    fullframenw
    Participant
    This reply has been marked as private.
    September 21, 2016 at 3:13 pm #1185369
    fullframenw
    Participant

    I am aware of these:

    By default, you can hide sections, rows and gaps. If you want to hide individual element, you could try using these classes:

    x-hide-xl to hide element on desktops
    x-hide-lg to hide element on laptops
    x-hide-md to hide element on tablets
    x-hide-sm to hide element on mobiles (landscape)
    x-hide-xs to hide element on mobiles (portrait)

    But can I add multiple classes? I want to hide two different rows with small and xs screens.

    September 21, 2016 at 3:17 pm #1185375
    fullframenw
    Participant

    Found out a simple space between the two classes does the trick ^_^

    September 21, 2016 at 8:36 pm #1185711
    Rue Nel
    Moderator

    Hello There,

    We are just glad that you have figured it out a way to correct the said issue.
    Thanks for letting us know!

    Best Regards.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1185340 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>