Archived topic
GenerateBlocks styling issue
7 replies · Started by Dmitrii on July 3, 2022
Basically finished my site redesign, but have a couple of outstanding issues.
1) The right-side bar on desktop has an empty box at the bottom of the column (when viewing in incognito), but it doesn't appear in the editor. What's causing this?
2) The right-side bar on mobile has issues with displaying article titles in full-width. There appears to be some sort of padding on the left and right side (which makes the text centered), but I haven't applied any padding in the editor (from what I can see).
I managed to make another sidebar appear correctly on mobile - if you scroll down you'll see it - but I can't seem to recreate it.
Thanks!
Hi Dmitrii,
1. Here’s a CSS you may try adding in Appearance > Customize > Additional CSS:
.gb-container.gb-container-f1a5bb67 {
height: fit-content !important;
}2. Here’s a CSS you may try adding to remove the default padding of the WP Group Block:
@media (max-width: 768px) {
.site-main .wp-block-group__inner-container {
padding: 0;
}
}Kindly let us know how it goes.
This worked perfectly - thanks Fernando! Why did it require CSS, did I do something incorrectly?
So with these two issues out of the way, I only have one left.
Do you mind taking a look to see why these two images might look differently on mobile?
The settings are exactly the same, they share the same parent container, and they also have the same media dimensions... so not quite sure what I did wrong.
1. You’re using a Grid Block, and each Container of a Grid Block by default is 100% height so that they look aligned. If you set the Background color to the Container Block within the Query Loop Block, you wouldn’t need the CSS anymore.
2. You’re using a WP Group Block which has its padding values taken from Appearance > Customize > Layout > Container > Content Padding. Try using a Container Block instead, and you shouldn’t need the CSS code provided here as well.
3. Can you check if the Image Block has a specific size set on mobile view? Example: https://share.getcloudapp.com/9ZuoDbkg. As is, it seems the other image has one and the other doesn’t.
Hope this clarifies!
Got it - the first two make sense.
As for #3 - the image blocks are the same size on mobile (no specific size was set / the field is blank).
Hi Dmitrii,
It looks like the image block is given width as 300px and height 168px.
https://www.screencast.com/t/liLOZCdYLM
Can you check its desktop setting? If so, try removing the values, or set its width to 100% instead.
Let me know!
Thanks Ying.
I tried tinkering with the settings and it wouldn't change, so I ended up replacing the container outright and that seemed to do the trick.
I'm sure I just missed some setting, but it all worked out regardless!
Glad it's working now :)
