Make wider main image in product page in mobile

Hi Freddy,

To accomplish this, I would recommend making your single product layout fullwidth, and then add some CSS to keep the spacing for the rest of the content.

Here’s a short video showing how to make the product fullwidth:
https://share.getcloudapp.com/bLux1479

Then add this CSS to Customize> Additional CSS:

.single-product .summary.entry-summary, .single-product .woocommerce-tabs.wc-tabs-wrapper, .single-product section.related.products  {
    padding-right: 20px;
    padding-left: 20px;
    }

Does that option work for you?

Best,
Kevin

Is it possible to make the single product layout fullwidth just on mobile ?

Mobile version
The description on the product page have a strange design, like the borders from left and right have been cut, also, some product recomendations on a product page have fullwith and others don’t.

• This reply was modified 3 years, 3 months ago by freddyee.
• This reply was modified 3 years, 3 months ago by freddyee.

hi
is there any posibility to get the described displayment before ?

Hi @freddyee,
Sorry for the delay! You can make Kevin’s CSS only take affect on mobile by wrapping it in a media query like this:

@media (max-width: 768px) {
.single-product .summary.entry-summary, .single-product .woocommerce-tabs.wc-tabs-wrapper, .single-product section.related.products  {
    padding-right: 20px;
    padding-left: 20px;
    }
}

Hope that helps!

Best,
Hannah

thanks for the response Hannah, but that’s not what I need help with.
1) I was asking on how to make this option (https://snipboard.io/2f5bgj.jpg) only take effect on mobile.

2) Also, some product recomendations at the bottom of the product page differ in width (https://snipboard.io/owhcq8.jpg) as you can see on the screenshot, and for exmaple this product page URL:
https://www.runayaq.com/producto/polo-valle-del-mantaro-peru/
How to fix that ?

Hi
is there any solution to the problem I presented ?