Archived topic
adjust margins for mobile
5 replies · Started by Anders on April 19, 2021
Hi! On my front page I have 4 textboxes with shadows. On mobile view they clash to tight vertically. I inreaced margin on those containers but there is no difference. I would like to have a gap betweeen them vertically but on mobile 2 of them doesn't have that (mobile view is just one column). How to fix this? Link below.
And I also have a more general question regarding mobelie- Do I have to write custom css with media queries if I for example want to change spacing and typography for mobile view only? I could not find a way to do it in Gutenberg (in for example Elementor you can do it visually in the pagebuilder)
Third question... what is the best aproach for custom CSS in GeneratePress? I mean the "Customize CSS" could grow too much with many lines of css code. Is it better to add inline css in each article in the html code (within Gutenberg)?
Hi there,
first off - as you're using GenerateBlocks which has responsive controls. When you select a GB Block you will see Desktop | Tablet | Mobile tabs in the sidebar - select each one to set the responsive styles.
For the missing gap issue - you're using a Grid Block which has Vertical ( and horizontal ) Gap - see here to apply the vertical gap for Mobile:
https://docs.generateblocks.com/article/grid-overview/#editing-the-grid-block
Regarding CSS - unless you intend to write 100's of lines oF CSS then i would not be concerned about it being added to the Customizer CSS.
Thanks David! I have been trying to use those tabs (desktop, table, mobile) but the problem was that when I changed something in the mobile view, the same change appeared in the desktop view, (and vice versa). See screencast. What am I missing?
The vertical gap was great, thanks. But I have large areas of white space in mobile view after some elements. From what I can see are those containers margins top and bottom set to zero.
See screenshots.
Hi Anders,
The paragraph block which you changed the font size in your video is not a GB block, GB has no control over it. You could use Headline block instead of the WP default paragraph block. You just need to select P in the element option to use it as a paragraph.
https://docs.generateblocks.com/article/headline-overview/
The large white space is coming from the vertical gap of Grid, you could set it to a lower value by clicking the mobile icon:
https://www.screencast.com/t/6mMwP9Kt4vyb
Finally solved, pheu! There was actually padding-bottom that created a white area. And it took time to understand all concepts.
Glad you figured it out :)
