Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 19, 2017 at 2:34 am #796265
    spidercreations

    I understand and have implemented the concept successfully, but I’m running into a couple of issues.

    I have a regular row hidden unless the screen width is below 1100px wide. (It shows a Book Now button and locations) I added this in since the Book Now button and locations need to be hidden in the header as the screen size gets smaller.

    Everything pretty much sort of works, but…
    1 – There is extra white space below the large image on the home page. If I remove the row (it contains five columns) the extra space goes away. Even though I have the five elements hidden above 1100px, there is still white space.
    2 – Below 740 pixels, I’d like to hide the four columns on the right side and only show the Book Now button. Is there a way to show some elements only below 1100px and above 740px?

    Thanks in advance!

    May 19, 2017 at 2:59 am #796272
    Sarah

    Hey spidercreations,
    1) Please try adding this inside your CSS for screens above 1100px:

    #after_layer_slider_1 .template-page.content.av-content-full.alpha.units {
    padding-top: 0 !important;
}

    2) Please try adding this to your Quick CSS:

    @media screen 
  and (max-width: 740px) { 
      #after_layer_slider_1 .show-mobile:nth-child(2),
      #after_layer_slider_1 .show-mobile:nth-child(3),
      #after_layer_slider_1 .show-mobile:nth-child(4),
      #after_layer_slider_1 .show-mobile:nth-child(5) {
        display:none !important;
     }
}
@media screen 
  and (min-width: 740px) 
  and (max-width: 1100px){ 
      #after_layer_slider_1 .show-mobile:nth-child(2),
      #after_layer_slider_1 .show-mobile:nth-child(3),
      #after_layer_slider_1 .show-mobile:nth-child(4),
      #after_layer_slider_1 .show-mobile:nth-child(5) {
         display:table-cell !important;
      }
}

    Best regards, Sarah

    • This reply was modified 7 years, 7 months ago by Sarah. Reason: added missing closing bracket in #2
    May 19, 2017 at 4:33 pm #796646
    spidercreations

    Sarah,
    Thank you. For the second item, it’s not working as expected.
    As the screen gets smaller, the first column does show up, but the other four columns are not show until the screen is LESS than 740 pixels. Then they show up stacked on eachother.
    In short, the Book Now button (first column) is correct, but the other four we want to show up only between 1100 and 740.
    I tried to switch some numbers around with no luck.
    Note that I already have the .show-mobile CSS assigned to that row. I did that by opening the first column in Edit Column > Row Settings.
    If you have a better approach, I’m totally open to ideas.
    Steve

    May 22, 2017 at 9:35 am #797493
    Sarah

    Hi,

    Ah, I understand now. Sorry, I got confused for a second there. I’ve updated the code in my previous answer. Can you try that one, please? 

    Best regards,
    Sarah

    May 22, 2017 at 1:42 pm #797635
    spidercreations

    Thank you,
    Unfortunately, the code broke the elements that I have in the header. Note the header has five widgets that are placed with CSS and also have @media assignments to “hide” below specific widths. The idea is that when these disappear in the header, they show up just under the image.
    I’ve left the code with your changes so you can see what is going on, plus I have the full style.css file for you right here to review:

    Thank you again!

    • This reply was modified 7 years, 7 months ago by Sarah.
    May 22, 2017 at 3:12 pm #797681
    Sarah

    Hi,

    Sorry, I’m not sure I can see the widgets you’re talking about. Can you show us a screenshot of what it’s supposed to look like, and what it looks like when my suggested code is there? Thank you!

    Best regards,
    Sarah

    May 25, 2017 at 5:06 pm #799645
    spidercreations

    Sorry, somehow I missed your reply. If you look at the site, your code resulted in the header getting messed up.
    There are five widgets in the header up on the right side, all positioned with CSS. The Book Now button, as well as the four locations with phone number.
    This is what happens to the header with the code you provided.
    https://snag.gy/PnS3hT.jpg
    The header should look like this:
    https://snag.gy/Ywbm6G.jpg
    So somehow, the code to edit the section below the big image is messing with the placement of the header widgets.
    Note that I put the full CSS in the zerobin link provided. Check out the sections under… /* This is the Book Now widget */ and
    /* These are the four location widgets */ as those are the placements for the widgets in the header.
    Thank you again so much.
    Steve

    May 25, 2017 at 5:55 pm #799678
    Sarah

    Hi Steve!

    Oh dear, it seems like what got me in trouble is a missing closing bracket! I’ve edited the code in my previous reply. It should work now! I’m apologize for that.
    Best regards,
    Sarah

    May 25, 2017 at 7:23 pm #799735
    spidercreations

    Thank you!

    May 25, 2017 at 8:08 pm #799765
    Sarah

    You’re welcome! Let us know here in the forum if you need further help.

    We’d also appreciate it if you can take a moment to review our theme if you haven’t already. https://themeforest.net/downloads 

    Thank you for using Enfold.

    Cheers!
    Sarah

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Hiding and showing sections based on screen width’ is closed to new replies.