Tagged: custom.css, enfold
I am using a custom CSS class on a grid row on my homepage, to hide the content based on whether the user is logged in or not. It works find on desktop size screens, however once it hits the mobile breakpoint, the custom CSS is ignored and the content is displayed whether or not the user is logged in. I have things that really need to be hidden before login, so any help would be greatly appreciated!!
Thank you!
Hey StormCreek,
Could you paste in the specific css you added? Perhaps media queries will help it apply to mobile.
Best regards,
Jordan Shannon
Here is the CSS I used to hide/show, and I gave my grid row a CSS Class called protected-content
.logged-in .protected-content { display: block !important; }
.protected-content { display: none !important; }
Hi,
Add this to quick css and see if it works for you:
@media only screen and (max-width: 767px) {
.logged-in .protected-content { display: block !important; }
.protected-content { display: none !important; }
}
Best regards,
Jordan Shannon
Goodness gracious. Lol, I already had tried that – and it didn’t work…but I just tried again, and it works. Go figure! Either way, thank you so much for the quick help! You can go ahead and close this issue :)
Hi,
I’m glad I was able to help you with this. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon