Archived topic
Problem with spacing in mobile version of site
7 replies · Started by Sue on March 20, 2023
I'm using Generate Blocks (I had a topic a few days ago) and just noticed that the spacing is off in the mobile version of the site. It looks great on desktop, but in mobile, the text went all the way to the edge of the window with no margin. I tried adding margins in the custom CSS, which worked, but then there is a white border around the whole thing. Is there a way I can change the CSS so that I can add margins to the text and eliminate the white border around the colored blocks?
Hi Sue,
The code shared in the previous topic shouldn't be causing that. For reference, can you share a screenshot of how it looks from your end on mobile?
Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots
Screenshot 1 is what it looked like before I added this code. Screenshot 2 is what it looks like after the code. I prefer the margins but wish the colors would extend out.
`@media (max-width: 868px) {
.gb-inside-container {
padding-right: 20px;
padding-left: 20px;
}
.entry-title {
margin-left: 15px;
margin-right: 15px;
}
.gb-container {
margin-right: 15px;
margin-left: 15px;
}
}
What are you going for with this code? Do you want it to run only on Desktop view?
If you look at the URL linked to below, you'll see that the red and black containers extend all the way to the sides of the screen on the desktop version. I haven't figured out how to do that on the mobile version without either having the text be too close to the edge of the screen or having a white border.
Basically I want it to look like Screenshot 1 except with a little bit of padding so the text is indented a bit.
I see. Can you remove the code you added here first?: https://generatepress.com/forums/topic/problem-with-spacing-in-mobile-version-of-site/#post-2576154
Then, for your Container Block, set left and right margins on Mobile View. Example: https://share.getcloudapp.com/yAuJZlx8
That worked, thanks!!
Is there a way I can apply those Mobile View margins globally or do I have to do it block by block?
You'll need to do it Block by Block.
If you want to do it Globally, you'll need a custom CSS.
You're welcome, Sue!
