Hello,
I recently discovered that my product page image is bugging when shown on a phone.
Like shown below, the product page shows 1 + 1/2 picture instead of only 1 on the first picture slide.
Does anyone know how to fix this? It happens on every product i have listed, not only this one.
Website: https://truthtrust.dk/
Password code: CAMO130
Version: Dawn 11.0.0
Because you’ve added this rule:
.grid {
justify-content: center;
}
the slider is centred.
The rule above uses a very generic selector, so can apply to multiple elements.
To fix product slider you can add this rule:
@media(max-width:749px) {
slider-component .product__media-list {
justify-content: unset;
}
}
Before/After:
Thank you very much for the answer, i will try it very soon.
Quick question, do i just put the code at the bottom of “base.css” or where should i add it?
Hi @AdamT06
In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:
@media screen and (max-width: 749px){
.product__media-list {
justify-content: flex-start;
}
}
Hello @AdamT06,
You need to paste this code in the end of base.css file.
@media only screen and (max-width: 767px) {
.product__media-list.contains-media.grid.grid--peek.list-unstyled.slider.slider--mobile {
justify-content: flex-start;
}
}
Results:
Since you’ve already started editing base.css, the you can add it there, at the bottom.
Usually though, I recommend using “Custom CSS” setting of the section – this helps avoiding at least some of the side-effects.
Thank you very much, it worked!
Do you by any chance also know what this is caused by? There is a black box/line on the phone version that appears every time I press the menu button. Is there any way to remove it?
Also, the social media icons at the bottom turn white, which makes them very hard to see. I would love them to be black if possible.
I do not see this.
Already fixed, I guess…
