Archived topic
Adjusting grid item heights on tablet and mobile
5 replies · Started by CorpCredible on May 23, 2022
I am working on a website that has a 3 column grid of images with text over it and vertically centered. On desktop I have them the height I want them but when it changes to tablet and mobile I'd like the images and whole grid to become less tall and have the text remain vertically centered. So instead of them being square like on desktop, on tablet and phone they become more rectangular and take up less vertical space. Is there an easy way to do this, or should I hide the desktop grid and create a separate one for tablet and phone? Thanks - great theme and support!
Hi Tom,
You may set the view to tablet or mobile through these Buttons when you have a Block selected: https://share.getcloudapp.com/E0uyWYxg
Doing so should allow you to make specific spacing modifications for Desktop, Tablet and Mobile to achieve the look you’re going for.
Hope this clarifies. :)
Hi Fernando - I am aware of how to target the tablet and mobile views. My question is about how to adjust the height of those grid items. I can't seem to get the boxes shorter without going into the css and that doesn't work that well, I'm sure there has to be an easier way. Is it a margin or padding setting? Min-height?
Hi there,
the grid items ( establish, brand, build ) all have a Minimum Height of 500px which is set in the Spacing panel.
I see now - all three need to be set for the change to take effect. Thanks!
Glad to be of help
