Remove the black frames around the product photo

[janeklass]

Hi,

How to remove black frames around a product photo.

[endriu107]

You should provide more information if you want help, for now I can guess that you need only add border: none; for this element.

[janeklass]

7 minutes ago, endriu107 said:

You should provide more information if you want help, for now I can guess that you need only add border: none; for this element.

Yes, I want to remove those black borders..

[endriu107]

You already have best answer you can get in my previous post.

[janeklass]

8 hours ago, endriu107 said:

You already have best answer you can get in my previous post.

Ok, do I understand correctly that I need to find the css? But where is it located in presta 1.7?

[ComGrafPL]

4 godziny temu, janeklass napisał:

Ok, do I understand correctly that I need to find the css? But where is it located in presta 1.7?

Share url here or in private. Will be faster.

[janeklass]

22 minutes ago, ComGrafPL said:

Share url here or in private. Will be faster.

URL : https://flamicroz.com/

However, I noticed that it looks a little different on the phone and on the computer. On the phone, both images (large and small) have a black border around them, but on the computer only the small image.

[ComGrafPL]

4 minuty temu, janeklass napisał:

URL : https://flamicroz.com/

However, I noticed that it looks a little different on the phone and on the computer. On the phone, both images (large and small) have a black border around them, but on the computer only the small image.

Both css should be already in your

https://flamicroz.com/themes/Artista/assets/css/custom.css

So just edit them like this:

.thumb.js-thumb {
  border: none;
  padding: 2px;
}

.js-thumb, #zoom {
  cursor: pointer;
  border: none;
  border-radius: 0px;
}

Clear the cache after.

[janeklass]

14 minutes ago, ComGrafPL said:

Both css should be already in your

https://flamicroz.com/themes/Artista/assets/css/custom.css

So just edit them like this:

.thumb.js-thumb {
  border: none;
  padding: 2px;
}

.js-thumb, #zoom {
  cursor: pointer;
  border: none;
  border-radius: 0px;
}

Clear the cache after.

Thank you!
It works...partly. The frames are no longer on the computer, but the frame is still there on the big picture on the phone, and there was a strange problem. Namely, if you click on a smaller image, the sharpness of the large image becomes worse. (Watch the video)

[ComGrafPL]

9 minut temu, janeklass napisał:

Thank you!
It works...partly. The frames are no longer on the computer, but the frame is still there on the big picture on the phone, and there was a strange problem. Namely, if you click on a smaller image, the sharpness of the large image becomes worse. (Watch the video)

output.1.avi

You would need to find the proper css in theme / zoom container, zoomlens module in files and set the border to none. You could also check the theme, modules setting in panel. Maybe it has that option to customize.