Display:none for grid - Post ID 280720
I wondered what is the best solution to not display the header for mobile viewpoint when using css grid but make it reappear for 640px and above.
My test site is http://phildias.com/master.html so you can see what I mean when you shrink the browser.
Kind regards, Phil
My test site is http://phildias.com/master.html so you can see what I mean when you shrink the browser.
Kind regards, Phil
At below 640 px you would in the display setting go to "More" and select "none" from the dropdown selector. Then you would have to move to above the 640 px and set it back to what it was.
Bootstrap 5 CSS Grid.
Hi twinstream. Thank you for your input. Unfortunately that didn't work because if you display:none for the header container the grid space behind still stays there because of the grid taking up the whole viewpoint.
Think I have solved it by changing the header layout section in the grid area to 0px for screens 639px and less. Regards Phil
Think I have solved it by changing the header layout section in the grid area to 0px for screens 639px and less. Regards Phil
What if you change the height of the main container height to auto?
Or, give the next container, below the header, a negative top margin that equals the height of the header?
Or, give the next container, below the header, a negative top margin that equals the height of the header?
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Phillip Dias wrote:
Hi twinstream. Thank you for your input. Unfortunately that didn't work because if you display:none for the header container the grid space behind still stays there because of the grid taking up the whole viewpoint.
Think I have solved it by changing the header layout section in the grid area to 0px for screens 639px and less. Regards Phil
Hi twinstream. Thank you for your input. Unfortunately that didn't work because if you display:none for the header container the grid space behind still stays there because of the grid taking up the whole viewpoint.
Think I have solved it by changing the header layout section in the grid area to 0px for screens 639px and less. Regards Phil
There are probably a thousand different ways to "skin a cat" when it comes to using the powerful layout tool Grid CSS. I am unsure why yesterday when I did the test on the "Holy Grail" template this worked but this morning I could not recreate what I did yesterday.
So I was able to set the display to "none" for the header container. I did have to then change the Grid setting for the main container to Line Based Placement and increase the row setting for it from 1 to 2.
Your way of setting the height to "0" seems much more easier.
I have included my modification as an example.
Bootstrap 5 CSS Grid.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.