incrase the image products and remove the border

[Roeiam]

hi i am trying to incrase my image product on the product page Dawn theme
i want to:

• remove the border of the image
• center the image (without the left padding - mark in blue)
• incrase the size of image
• it possible i want to decrease the size of the thumbnails so 5 images will fit and not only 3
  this is how it look now :

and this is how i want it to look:

pls if someone can help it will be great!

[Moeed]

Hey @Roeiam

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Roeiam]

i try this and it only center my images thank you for that
now it look like this:

i still need to increase the size of the image so it will be full wight screen like the image i send in the previous message and
i want to decrease the size of the thumbnails so in full wight screen will fit 5 images

[Moeed]

Hey @Roeiam

Remove the previous code and try this updated code.

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Roeiam]

nice it work for the width but i want the image will be has ha squre as can and this padding that i mark in red i dont want it
also if you find a solution for the thumbnails you will be legendary
thank you for all help!
now it look likr that:

[Arif_Shopidevs]

You can use this css it will remove the above padding also

product-info#MainProduct-template--20612994531533__main {
    padding-top: 0px !important;
}

[Roeiam]

hi thank you for help i added your code and add a
object-fit: contain;
border: none !important;

but it still dont work and still have the issue with the padding and that the image are not squre like it should so it cut my image

this is the code i have now:

/* remove border from images and raduios corners /
@media screen and (max-width: 767px) {
.image-with-text__media{
border: none !important;
border-radius: 25px !important;
}
/ padding to mulitrow */
.image-with-text__content {
padding-right: none !important;
padding-left: none !important;
}

.product__media-list .product__media-item {
width: 100% !important;
padding-top: 0px !important;
object-fit: contain;
border: none !important;
}
.product-media-container.constrain-height {
border: unset !important;
padding-top: 0px !important;
object-fit: contain;
border: none !important;
}
.product-media-container.constrain-height {
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding-top: 0px !important;
object-fit: contain;
border: none !important;
}
product-info#MainProduct-template–20612994531533__main {
padding-top: 0px !important;
}

[Arif_Shopidevs]

It removes the top padding

.section-template--20612994334925__main-padding{
    padding-top: 0px!important;
}

, secondly which iPhone you are checking? It show square in my google chrome.

[Roeiam]

in google chorme it work for me to but in my iphone 13 is not working

[Roeiam]

is still cutting my image

[Roeiam]

my theme stack like that pls help

[Arif_Shopidevs]

Will you update your browser and checked . In my mac safari developer more I checked it looks fine.