Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 11, 2019 at 5:58 pm #1109229
    eric_gman

    Hi,

    I’m looking for a way to hide a cell for tablets on specifics pages, not all. (medium sized screens & small screens).
    Actually it’s only possible to do it for mobiles as you can see on thoses pictures :

    https://www.dropbox.com/s/8cewlwl65w1fjvu/enfold1.jpg?dl=0
    https://www.dropbox.com/s/z8i1dgd23rxyeq4/enfold2.jpg?dl=0

    Any idea to do this ?

    Best regards.

    June 12, 2019 at 6:31 am #1109371
    Rikard

    Hey eric_gman,

    If you add a class to the element, for instance hide-for-tablet. Then you can use this CSS to hide it:

    @media only screen and (max-width: 1024px) {
.hide-for-tablet {
  display:none;
}
}

    Best regards,
    Rikard

    June 12, 2019 at 7:02 am #1109389
    eric_gman

    Hey Rikard,

    Thank you for your answer.
    I’ve know specified… 

    @media only screen and (max-width: 1024px) {
.hide-for-tablet {
  display:none;
}
}

    …on my general css file.
    How now can I dedicate the class .hide-for-tablet to a specific cell ?

    Best regards

    June 12, 2019 at 12:27 pm #1109459
    Rikard

    Hi,

    Is it a Grid Row element that you are using? If so then you should see the custom CSS field in the options of the element. If not then select to activate it under Enfold->Layout Builder.

    Best regards,
    Rikard

    June 12, 2019 at 4:31 pm #1109526
    eric_gman
    This reply has been marked as private.
    June 13, 2019 at 5:53 am #1109708
    Rikard

    Hi,

    Thanks for the update, the only thing I can see disappearing now is the cell with the man in the leather jacket which you highlighted in the screenshot. It disappears on mobile, because the hide-on-mobile class is added to it. Is that correct or not?

    Best regards,
    Rikard

    June 13, 2019 at 6:28 am #1109719
    eric_gman

    Hi Rikard,

    Yes that’s correct. It should be disappearing also for tablet thanks to your css class “.hide-for-tablet”, but it’s not unfortunately.
    Any idea of what am I doing wrong ?

    Best regards.

    • This reply was modified 6 years, 8 months ago by eric_gman.
    June 13, 2019 at 1:48 pm #1109861
    Rikard

    Hi,

    Thanks for the update, I checked it again and everything seems to be working as it should on my end. The class hide-for-tablet is added and it disappears below 1024 screen resolution. If you can’t see that on your end then please try checking in an incognito window using Chrome for instance.

    Best regards,
    Rikard

    June 13, 2019 at 6:29 pm #1109966
    eric_gman

    \o/ Well done !

    Yeah !!! Thank you so much for your help Rikard, indeed it works !
    Thank you for the incognito windows tips to prevent the cache.

    Best regards,

    Eric

    June 13, 2019 at 7:13 pm #1109986
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Enfold – Hiding a cell for tablet.’ is closed to new replies.