Product Page - Help

[ellacoker]

Hello,

I need help with a couple of things on my product page

1. I want my product image to come 100% width of page on mobile. There is far too much padding either side.

2. Where it says "you may also like" at the bottom of the page, this collection seems to have uneven padding! And i cannot figure out why. I also want the collection to line up with the text.

3. In general, on mobile version, I want to reduce the padding in the product information container, I want the information to come out almost full width. 

Thank you so much,

Ella.

URL: https://www.livwithin.com.au/products/organic-cotton-yoga-mat-moon

PW: pewpog

[thescriptflow]

Here is the solution code you have to paste on the end of base.css file. Here is how you can find base.css file.

Go to Shopify Admin > Online Store > Edit Code > base.css

1. In order to make product media full width on Mobile and the below information also take full width then you have to paste this code in the end of base.css file.

@media only screen and (max-width: 750px){
#MainProduct-{{ section.id }} .page-width{
padding: 0px !important;
}
}​

• In order to make the "You may also like" products same padding like it's title then you have to paste this code in the same base.css file.

.product-grid, .product-container, .products{
    padding-left: 0px !important;
}​

By pasting these two code will surely fulfill your all requirements.

If you need more help please feel free to let me know.

Thanks