I'm struggling with the settings for mobile devices. I cannot find dedicated setting within the Them Options panel.
I've got a row with 5 columns, gaps between set for 10px. When I start decreasing the width of the screen to check how it behaves on mobile, the gaps suddenly change to bigger value, the headings text becomes unreadable and when the view finally switches to mobile phone view, the gaps between columns are like 40px at least. Where do I adjust these settings? How do I set a screen size breakpoint for mobile?
Check the screenshots - in this case I set the column gap for 0px / expecting to stay that way when the screen size changes. But no - the gap increases until it looks really bad...
I've disabled mentioned settings. Apart from a small gap change it did not do much. Check screenshots. Once you start making you screen smaller the columns loose their 10px gap - this increases to much larger amount. Once you reach mobile breakpoint, you see one column at a time but their vertical gap is still too large - definitely larger than 10px. Seems like 50px or so to me.
OK, my bad - I though that was the settings for the Inner Row, not the Inner Column. Sorry.
However this only fixed the horizontal spacing between columns, but once they get into the vertical alignment - one column for the entire screen - the vertical gap between them is still too large. The screenshot is after the fix.
Hi,
I'm struggling with the settings for mobile devices. I cannot find dedicated setting within the Them Options panel.
I've got a row with 5 columns, gaps between set for 10px. When I start decreasing the width of the screen to check how it behaves on mobile, the gaps suddenly change to bigger value, the headings text becomes unreadable and when the view finally switches to mobile phone view, the gaps between columns are like 40px at least. Where do I adjust these settings? How do I set a screen size breakpoint for mobile?
Check the screenshots - in this case I set the column gap for 0px / expecting to stay that way when the screen size changes. But no - the gap increases until it looks really bad...
What gives?
Thanks for help.
Hi,
Please provide the wp-admin access. We will try to help you.
1) Please disable these settings:
2) pls. use following css:
@media (max-width: 1199px){ .wpb_row > * { margin-top: 0 !important; } .wpb_row { margin-top: 0 !important; } .gem-textbox { margin-bottom: 0 !important; }}Hi,
I've disabled mentioned settings. Apart from a small gap change it did not do much. Check screenshots. Once you start making you screen smaller the columns loose their 10px gap - this increases to much larger amount. Once you reach mobile breakpoint, you see one column at a time but their vertical gap is still too large - definitely larger than 10px. Seems like 50px or so to me.
You didn't disable the settings that I indicated to you in the previous message.
OK, my bad - I though that was the settings for the Inner Row, not the Inner Column. Sorry.
However this only fixed the horizontal spacing between columns, but once they get into the vertical alignment - one column for the entire screen - the vertical gap between them is still too large. The screenshot is after the fix.
Please use these settings: