Adding margins to edges of shop pages/products for mobile

[foodiniclub]

Hiya! I am using the X theme with Renew stack but having issues with how my shop pages are displaying on mobile. The pictures, navbar and product description are all fitting edge to edge once the screen size drops down and I need to find a way to add a margin around all edges… I have tried adding some extra CSS but it hasn’t worked. Any help would be appreciated

[foodiniclub]

I have attached a snap of the issue on a product page - the long description (boxed) is ok, it’s everything above in the short description and the navbar drop-down menu that has the issue.

[prakash_s]

Hello @foodiniclub,

Thanks for writing to us.

To add space in the product summary, you can add this custom CSS code under X—>Theme Option —>CSS

@media(max-width:766.99px){
.single.woocommerce .summary.entry-summary {
    padding-left: 10px;
    padding-right: 10px;
}
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[foodiniclub]

Thanks for your reply. Unfortunately this didn’t fix the issue - it’s odd as it’s across the board with the whole shop page whether inside products or on the main product listing page. All the text whether it’s the product title or the short description is all edge to edge, as well as the navbar/drop-down menu on mobile.

I don’t really know CSS very well or have a huge amount of time to learn it, which is why I was hoping that you guys might be able to help! It’s just quite a shame as the theme looks good on desktop, but on mobile it isn’t working so well and I’m wondering why - especially important to me as about 90% of my web traffic is on mobile and my conversion rate is super low as a result compared to the desktop users I would have thought this kind of thing was a quick fix or was already built into how the theme would work on mobile, but it isn’t seemingly that easy!

[friech]

Hi @foodiniclub,

Sorry, please remove the custom CSS previously provided, this issue should not be happening in the first place. So I investigated your site, I found out that you set the Theme Options > Layout and Design > Site Width to 100%, that is why.

Site Width is default to 88% so the site width (or main container) will not take up the entire width of the screen. So the quick solution is to not set the Site Width to 100%

Hope it helps,
Cheers!

[foodiniclub]

Thank you for your reply, yes that generally helps! It does make sense.
However, on the home page the image bar at the top of the page I did want to be full width, is there any way of making this do that rather than sit within the container/not have white edges?
Also, while the individual shop product listings now look good, the main shop page shows all the product titles not in alignment with the images above them (they’re all off to the left slightly). Is there any way to force them all to align with the images above them?
Thank you so much, it’s getting there now!

[foodiniclub]

Actually I don’t mind the image on the home page being boxed, it’s fine. Just the text being off in alignment on shop page is really the main fix!

[foodiniclub]

It’s ok, I think I’ve sorted it with some CSS. All good. Thanks for your help

[marc_a]

Hi @foodiniclub,

We’re glad that you’re able to figure it out! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.