Archived topic
Css problem on product single pages
9 replies · Started by johnaps on April 11, 2020
Hello GP Team!
We have previously made some customization in a previous thread for bringing the gallery images on the left of the main image... problem is that when the main image is small i get this problem
https://imgur.com/a/GMdRnv8
The secondary image appears right of the main image...
An other example is this https://sofianos-orthopedika.gr/%CE%AC%CE%B8%CE%BB%CE%B7%CF%83%CE%B7-%CF%85%CE%B3%CE%B5%CE%AF%CE%B1-%CE%BA%CE%B1%CE%B9-%CE%BF%CE%BC%CE%BF%CF%81%CF%86%CE%B9%CE%AC/%CE%AC%CE%B8%CE%BB%CE%B7%CF%83%CE%B7/%CE%BB%CE%AC%CF%83%CF%84%CE%B9%CF%87%CE%B1-%CE%B3%CF%85%CE%BC%CE%BD%CE%B1%CF%83%CF%84%CE%B9%CE%BA%CE%AE%CF%82/swlines-gumnastikis-msd-band-o-ring-loop-ac-3118/
I tried to fix it several times, over the past days, mostly messing with the trigger element on the gallery but couldnt do it as it seems... Any ideas?
Thank you in advance...
Hi there,
I'm not seeing any issues in that product. Which browser are you using?
Is there another product I can check out?
I see it on many products but when i enter developer console the bug dissapears :/
Aside of making sure all your images are the same dimensions you can do this:
.flex-viewport {
max-width: 600px;
}It does however mean all images are the same width and there will be space to the side on large screens. But not much can be done about that.
i think the above css fixed it for most pages but the following in chrome is still the same
https://sofianos-orthopedika.gr/%CE%AC%CE%B8%CE%BB%CE%B7%CF%83%CE%B7-%CF%85%CE%B3%CE%B5%CE%AF%CE%B1-%CE%BA%CE%B1%CE%B9-%CE%BF%CE%BC%CE%BF%CF%81%CF%86%CE%B9%CE%AC/%CE%AC%CE%B8%CE%BB%CE%B7%CF%83%CE%B7/%CF%8C%CF%81%CE%B3%CE%B1%CE%BD%CE%B1-%CE%B9%CF%83%CE%BF%CF%81%CF%81%CE%BF%CF%80%CE%AF%CE%B1%CF%82-%CE%B9%CE%B4%CE%B9%CE%BF%CE%B4%CE%B5%CE%BA%CF%84%CE%B9%CE%BA%CF%8C%CF%84%CE%B7%CF%84%CE%B1/%cf%84%cf%81%ce%b1%ce%bc%cf%80%ce%bf%ce%bb%ce%af%ce%bd%ce%bf-mambo-max-standard-ac-3246/
should i upload specific dimensions images to avoid this problem?
Ideally you want all images to be the same size and a size that fits their maximum size requirement.
what do you think would be ideal for my particular situation, so i can hide the second image from appearing right off my main image?
The last link you provided, the image is only 400px wide. If thats the smallest image you are using then thats the max-width you would need to apply to the flex-viewport.
Thank you David!!
You're welcome
