I have added a custom sections on my theme homepage for mobile and desktop. Using @media only screen in css I hide the mobile section when screen is over 749px wide and hide the desktop section when screen is under 749px wide. The problem I have is that when the mobile section is hidden a white space remains on the desktop view, however when in mobile mode the white space does not remain from the hidden desktop section.
Is there some style I am missing from the mobile section version that is allowing it to take up space?
Site is at https://southernorganics.co.nz/
1 Like
You’re hiding the inner content of your sections with the medium-up–hide class, however each of your sections have a padding of 55px top and bottom which is causing this space. Another approach would be to remove this padding from the sections and apply it to the inner content instead.
I changed the 55px to 0px to test but the space is still there. I do understand what the 55px top and bottom is doing between sections but it is not causing my issue. The mobile section when hidden does not allow the section below it to move up and take its place.
Is this the space you are referring to?
https://monosnap.com/file/VSMsUiZVdc6V3wdFnNE2QAhIksJqUb
It won’t move up to take the space because there is padding on the parent section element, but you are only doing display:none on the inner elements.
https://monosnap.com/file/iUhJ9ys2C1YogZABhpidrhAsLbn3Eu
if I change index-section css I will disrupt other sections. How can I isolate this particular one with new style?
@Stu-organics
Please add the following code at the bottom of your assets/theme.css file.
@media only screen and (min-width: 750px){
#shopify-section-1624976448aacad715, #shopify-section-1624976538c63d3aa9, #shopify-section-1624976550e9ca8470{
display: none;
}
}
Hope this works.
Thanks!
Just starting out and have learned something today, cheers!!
1 Like
