Tagged: cells, disappear, grid, mobile, responsiveness
How could you make a grid cell that displays on the desktop disappear rather than stacking when the browser is pulled down to a smaller width. This site does exactly what I want my site to do: http://www.der-prinz.de/ My site is set up with grid rows with 2 cells. One has a text block and the other has a picture. I want the cell with the picture to disappear on mobile so only the cell with text displays. What’s the best way to do this?
Hey centralcreative!
What id your level of CSS? You can use some media queries, to hide elements on mobile.
here is an example:
https://css-tricks.com/forums/topic/mobile-device-trick/
which you can study and understand how it is done.
Regards,
Basilis
Thanks! Figured it out.
I added this code to my php so I could assign a custom css class to individual elements:
add_theme_support(‘avia_template_builder_custom_css’);
Then added this code in the quick css box after assigning classes to the 3 elements I wanted to shrink:
@media screen and (max-width: 800px) {
.yourclass {
display: none !important;
}
}