Solved

How to have my product images bleed to the edges of the screen

rene94
Explorer
60 1 8

It works for my site on desktop, but when I switch to mobile it's not really centred:Capture 1.PNG

This is an example of how it is now and what I don't want.

 

Website link: https://9g99ww8igezgur08-74826613002.shopifypreview.com

Accepted Solution (1)

Vinsinfo
Shopify Partner
302 112 107

This is an accepted solution.

@rene94 Please follow below steps to set the product images to edges of the screen. Let me know whether it is helpful for you.

 
1. From admin, go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Go to "base.css" file and paste the below code at the bottom of the file and save changes.

 

.product__media-list.slider .product__media-item {
  margin: 0px !important;
  padding: 0px !important;
}
.product.grid {
  padding-top: 0px !important;
}

 

Vinsinfo_0-1716272274943.png

 

Result will be like,
Vinsinfo_2-1716272307676.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Reply 1 (1)

Vinsinfo
Shopify Partner
302 112 107

This is an accepted solution.

@rene94 Please follow below steps to set the product images to edges of the screen. Let me know whether it is helpful for you.

 
1. From admin, go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Go to "base.css" file and paste the below code at the bottom of the file and save changes.

 

.product__media-list.slider .product__media-item {
  margin: 0px !important;
  padding: 0px !important;
}
.product.grid {
  padding-top: 0px !important;
}

 

Vinsinfo_0-1716272274943.png

 

Result will be like,
Vinsinfo_2-1716272307676.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support