Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 19, 2019 at 12:37 pm #1158127
    goingthewholehogg

    Hello,

    Can you provide custom CSS to hide a layout column on screens bigger than 767px? Since the ‘Developer’ menu has been added in the recent update it should be possible to do this right?

    I often like to use two images, one to be displayed on bigger screens and the other on smaller screens. Previously, I’ve been hiding the contents of a column on smaller screens using ‘Screen Options’, but not hiding the column itself. This has often resulted in spacing issues.

    Thanks,

    Del

    November 20, 2019 at 6:01 am #1158361
    Rikard

    Hey Del,

    Could you post a link to where we can see the elements in question please? Also please specify what you would like to hide and on which screen resolutions.

    Best regards,
    Rikard

    November 20, 2019 at 12:38 pm #1158442
    goingthewholehogg

    Hey Rikard,

    So, just to be clear, my end goal is to have the two same or similar images displayed in two different layout elements (columns): one for larger screens, one for smaller screens.

    Previously, I’ve been checking ‘Hide on mobile devices’ under the Screen Options tab in the layout element (column) I want to display on larger screens. However, there’s no option to hide on larger screens under the Screen Options tab in the layout element (column). For the content I want to display on smaller screens, I have been going to the Screen Options tab of the Image or Text Block within the layout element (column) and checking the boxes to hide on large and medium sized screens. I have been ‘highlighting’ the columns for mobile view to make them bigger and stretch across the width of the screen, but this seems to create extra white space visible on larger screens. I’ve then had to compensate with negative white space.

    Essentially, I think I want to display one layout element (column) at a resolution of 767px and below, and one layout element (column) at a resolution of 768px and above. This would correspond to the boxes for smaller and larger screens in the Enfold ‘Screen Options’ tab in various elements.

    You can see how I’ve done this at our recent blog post:

    https://www.goingthewholehogg.com/eat-and-drink-in-tainan/

    I’ve put login details in the Private Content section below so you can see what I’ve done in the backend.

    Perhaps you can suggest a better way to do it.

    Thanks for your time,

    Del

    November 21, 2019 at 6:28 am #1158711
    Rikard

    Hi Del,

    Thanks for that. I had a look at your layout and front-end, but I can’t really see any obvious white space problems, I guess that is what you have used negative margins to hide? I couldn’t find it in your layout though, could you remove one of them so that we can see any example of what you would like to remove please?

    Best regards,
    Rikard

    November 22, 2019 at 11:02 am #1159065
    goingthewholehogg

    Hey Rikard,

    I’ve been putting the negative white space inside the layout element for mobile view, this dealt with the extra white space on larger screens.

    However, what I want to do is hide the entire layout element (column) on larger screens, thereby eliminating any spacing issues and significantly simplifying my process.

    Can you provide me with a means of hiding a layout element (column) on screens that are 768px and above?

    Thanks again for your time,

    Del

    November 23, 2019 at 4:44 am #1159383
    Rikard

    Hi Del,

    Thanks for the clarification. I think the best way to do that would be to add a class to the elements which you want to hide on screens above mobile, the class could be called hide-all-except-mobile for example. Add that class to the element in question in the element options, then add this to Quick CSS:

    @media only screen and (min-width: 768px) {
.hide-all-except-mobile {
  display:none !important;
}
}

    Best regards,
    Rikard

    November 24, 2019 at 9:32 am #1159563
    goingthewholehogg

    Hi Rikard,

    I’ve tested it and it seems to work perfectly. Just what I was after.

    Thanks very much,

    Del

    November 24, 2019 at 10:22 pm #1159697
    Mike

    Hi,
    Glad Rikard could help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Custom CSS to hide layout column on desktop’ is closed to new replies.