Archived topic
Mobile styling
11 replies · Started by ken on November 17, 2020
Hi there,
I am trying to styling my site smaller screen size (mobile). I want to have two blocks on a row for the circles here in the chrome dev tool it worked to set the setting to 50% but when i added the css in WP it didn't work.
Could you help me out? This is what i added in the additional CSS
@media (max-width: 767px)
.gb-grid-wrapper > .gb-grid-column {
width: 50%;
}Thanks!
Hi there,
you don't require CSS with the Grid Block.
Instead select each grid item block one at a time, in the Settings > Sidebar under layout, switch to Mobile view and change the Width to 50%
https://docs.generateblocks.com/article/container-overview/#grid-item
Hi there,
I do not see the Settings > Sidebar. What I see in the settings when I select the grid item are: typography, color setting, text setting and advanced.
Is there a different setting you are refering to?
It's under the container settings.
See this section of the videos here:
https://youtu.be/WCyp5Xg4aXM?t=606
If you want to learn how to use GenerateBlocks, I'd recommend going through some of our videos here:
https://www.youtube.com/channel/UC6qhGBk96asTcTWW42-yT2Q
thanks that was helpful!
It seems that the fonts doesn't differentiate between desktop and mobile? Is that because I would need the pro version to activate it?
Hi there,
where are you wanting to change the font sizes ?
If its within your content and you're using a GB Headline Widget then in the Settings sidebar simply select the Mobile Tab and then make your font size changes.
If its across your site then the Customizer > Layout > Typography setting include Mobile sizes for the most common text elements.
Hi David,
I am trying to change the font-size from the generate block settings>layout>typography. When I change the mobile the desktop changes together with it. That's my problem.
Just to be clear, if you add a desktop font size, and then switch to Mobile, and change the font size then the desktop value changes as well?
yes
Hi ken,
I am trying to change the font-size from the generate block settings>layout>typography. When I change the mobile the desktop changes together with it. That’s my problem.
Are you using the newest version of GenerateBlocks (1.2.0) ?
I believe this is a known bug from the older versions (1.1.2). I believe Tom already addressed this last month on version 1.2.0's release.
https://generateblocks.com/generateblocks-1-2-0/
"Fix: Container tablet/mobile font size values" was an issue from v1.1.2.
Hi Elvin,
Thanks! Updated and it works now!
Thanks! Updated and it works now!
Nice one! Glad it works for you now. No problem. :)
