Product image gets cropped in the product page

[miltokas]

Hi all!

I am having a problem in the mobile view that for some products the main image gets cropped and it shows haft of the second. This only happens for some products.

Any idea what could be?

Thanks for any support!

There: Dawn

Example of page with issue on mobile: https://vengastore.com/collections/women-accessories/products/finger-chain-bracelets

[BSS-Commerce]

Hi @miltokas ,

1. Go to Themes → Edit code, find file name “base.css”, add this code

@media screen and (max-width: 767px) {
	ul.product__media-list.grid.slider.slider--mobile {
		justify-content: unset;
		scroll-padding-left: unset;
	}
	
	ul.product__media-list.grid.slider.slider--mobile li {
		width: 100%;
	}
}

2. Find file name “section-main-product.css” and add this code

@media screen and (max-width: 749px){
	.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
		margin-left: unset;
		margin-right: unset;
	}
}

The result will be like:

Before


After


**Hope it helps @miltokas **

[theamazingrt023]

I cant find Base.css in my code theme can you give me some advice same thing is happing to me

I brought a store theme called electro