Product layout

[projectthirteen]

Hey, 

can anyone help me make my product images bigger so that it stretches to the end of the screen rather than having padding. See an image below of my current store and what im hoping to achieve. 

Any help would be unreal. 

Ive attached my store URL at the bottom.

 

URL: https://project-thirteen.com.au

 

[Artzen_tech]

Hi @projectthirteen 

Its Artzen Technologies! We will be happy to help you today.

You can follow the below css which I have mentioned. And check the result.
1) Go to your Online Store
2) Edit Code
3) Find CSS File
4) Add the following CSS

.product__media-item .product-media-container.constrain-height.media-fit-contain {
    width: 100%;
}

If my solution helped you, then please mark it as accepted.

Let me know if need further assistance
Regards,
Artzen Technologies

[projectthirteen]

Hey @Artzen_tech sorry this didnt work

[projectthirteen]

... it still has padding 

Is there anything else I could try?

[Artzen_tech · Accepted solution]

Hi @projectthirteen 
You can do one thing, go to main-product.liquid file and remove page-width class from their.

And it will be full width

[projectthirteen]

thanks, do you know how to centre the text there instead of it sitting on the left?

[dws_pvt_ltd]

Hello @projectthirteen, It can do it with some changes in the Code and Add/Edit CSS code.

Go to your product page section, in this above the div of class containing "product product--medium" there is a div with class name "page-width", please remove that class only of the page-width. Add the below CSS in the product CSS file which is "section-main-product.css". please find the CSS class with below code in that file and see the results.

.product.grid {
    overflow: hidden; /* add this new css */
    gap: 0;
}

.product-media-container.constrain-height.media-fit-contain {
    --contained-width: calc(var(--constrained-height)* var(--aspect-ratio));
    width; min(var(--contained-width),100%); /* remove or comment this css */
    width: 100%; /* add this new CSS */
}

@media screen and (min-width: 750px) {
    .product__info-wrapper.grid__item {
        padding: 0px 7rem 0 5rem; /* update this CSS */
    }
}

/* add this CSS at end of the file */
@media screen and (max-width: 749px) {
    .product__info-wrapper.grid__item {
        padding: 0 2rem 0 2rem !important; /* add this CSS */
    }
}

See the output below,

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[projectthirteen]

Thanks for that, it looks great on mobile but would you know how to make the product image (only on mobile) cover the whole screen (like the below image) 

Any help would be great.