Archived topic
Blog Content width problems with product boxes
3 replies · Started by Daniel on November 23, 2021
I use an elements layout for my blog posts. With 800px width. However recently my product boxes are out of align with the width of the content. Especially in the mobile version.I use reusable blocks for these product boxes.
This is how the product boxes look now on mobile version (box with blue borders): and https://www.maeexperiente.com/melhores-carrinhos-de-bebe-importados/
This is how it's supposed to be looking (blue border boxes on mobile are alligned): https://www.maeexperiente.com/carrinho-safety-1st-mobi-e-bom/ and https://www.maeexperiente.com/melhores-marcas-de-bicicleta-infantil/
Anybody how help? Is the problem the content width of the post? Or the product boxes itself? I haven't changed the boxes at all.
Hi Daniel,
There're negative margin left/right applied to the product box container block on mobile:
https://www.screencast.com/t/YOyxZlsdwzWP
If you can remove the margin, the issue should be fixed. :)
Thanks Ying. I've fixed the margins for that specific article. The problem is a have at least 30 articles with the same layout problem. Is there are alternative to fix this besides manually editing every article?
I use reusable blocks for those product boxes, but I convert to regular blocks before I publish them. I've already changed the margins on the reusable blocks so going forward I'm good.
No, I don't think there's shortcut for this, since every containerhas it's own unique ID, we can't use CSS to target them all precisely.
You can give this CSS a try, but it's targeting all the GB container in single post on mobile:
@media (max-width: 767px) {
.single-post .entry-content .gb-container {
margin-left: 0 !important;
margin-right: 0 !important;
}
}I would still recommend manually working on them to avoid potential problems in the future.
