How to make product images large with no border

[user151002]

How do i make my product listing look like this within the dawn theme?

Specifically the image layout and size with no borders in between.

Any help appreciated !

[CodingFifty]

Hi @user151002,

Thank you for reaching out to the Shopify community. I'd be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

[user151002]

Hi !

https://www.casasarta.com/

pw - rtaisk

[CodingFifty]

Hi @kodkiosken,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

 @media screen and (min-width: 750px) {
.product-info .page-width {
    padding: 0px 3rem 0px 0rem !important;
}
.product__media-list {
    gap: 0px !important;
   border:none !important;
}
.product__media-item>* {
    border:none !important;
}
}

[ennovative-it]

Try to add this code to the section "Custom CSS" of your theme

ul#Slider-Gallery-template--23234010251552__main {
    gap: 0px !important;
border:none!important;
}
.product__media-item>* {
border:none!important;
}

[kodkiosken]

A general tip would be not to spend too much time focusing on making tweaks for a huge desktop version, as most of your traffic will likely come from mobile.

To achieve the desired outcome, first, make sure you've selected the 2-column layout for desktop in the Theme Editor → Product Page.

Then, go into base.css and paste the following code at the bottom of the file:

@media screen and (min-width: 750px) {
.grid {
column-gap: 0px !important;
row-gap: 0px !important;
}
}

This should give you a similar look and feel to what you requested.

A few more things you could do to maximize the effect include using taller product images. Either by cropping them before uploading or by styling them with css in a standing format.

You can also consider increasing your page width in the Theme Editor (under "Layout").