- This topic has 7 replies, 3 voices, and was last updated 1 year, 5 months ago by Leo.
-
AuthorPosts
-
November 18, 2020 at 1:31 pm #1536742Website Psychiatrist
Is there / there needs to be a way to hide a grid containers when switching to tablet or mobile. I’m finding the grid layout to be extremely powerful, but there are times where elements that are used in the desktop version just really don’t need to show up in tablet or mobile.
I thought GP might have already accounted for this, so I tried setting the container width to zero in tablet, but let’s just say the results weren’t what I was hoping for! 🙂
Frankly, if I’m making a wish list, I could see being able to hide grid container on Desktop, too. Depending on the layout, I could see custom building a grid container for each screen.
Thanks!
BillNovember 18, 2020 at 1:43 pm #1536756LeoStaffCustomer SupportHi there,
Would the built-in
hide-on
classes help with this?
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classesIf not can you link me to the page in question?
November 18, 2020 at 1:56 pm #1536761Website PsychiatristWow! That was fast!
If I’m understanding “hide-on” correctly, it looks like it’s just hiding content in a container. I’m talking about hiding an entire container. I’m envisioning where you pick the container’s width for each screen, you can check a box that says “hide”
Here’s an example of what I’m experimenting with.
On this page:
https://dev.cincsolutions.com/night-at-the-races/The container with the black background with the stylized “C” could just be dropped in tablet and mobile.
Thanks,
BillNovember 18, 2020 at 2:45 pm #1536815LeoStaffCustomer SupportIf I’m understanding “hide-on” correctly, it looks like it’s just hiding content in a container.
Not sure if I fully understand, if you add the class to the container itself, then the entire container should be hidden.
Can you try this for the black container with a C?
https://www.screencast.com/t/w8rgAqFN04aNovember 18, 2020 at 3:00 pm #1536835Website PsychiatristI apologize. I saw this:
<div class="hide-on-mobile hide-on-tablet"> Content here will only display in Desktop </div>
and my brain translated that into only working inside of a content block.
I added “hide-on-mobile” in the “CSS Classes” field under the advanced settings for the container and it worked exactly as I had hoped.
You’ve made me all the more sure that I did the correct thing by planning on doing all future development with Generate Press.
Thanks!
BillNovember 18, 2020 at 5:04 pm #1536896LeoStaffCustomer SupportNo problem 🙂
November 21, 2022 at 9:17 am #2425824DeniseHola Leo!
I was having a similar situation with a 2 container grid.
I was using the left one to show a sticky table of contents.
I’ve applied the hide-on class for mobile and tablet, but I keep seeing the right column “at the right”.
Is there a way to show it centered on mobile and tablet view (once the 2dn container was hidden)?
Thanks!
DeniseNovember 21, 2022 at 11:07 am #2426025LeoStaffCustomer SupportCan you open a new topic for your question and link us to the page in question?
Thanks!
-
AuthorPosts
- You must be logged in to reply to this topic.