I would like to add Trust Badge in the form of codes. The current codes are as follows. These codes can realize the display of pictures on computer and mobile phone terminals, but the displayed pictures cannot be adaptive to display with different types of mobile phones. Who can tell me how to solve it?
.mobile-image{
display: block;
}
.desktop-image{
display: none;
}
@media (min-width:750px){
.mobile-image{
display: none;
}
.desktop-image{
display: block;
}
}
PC——display well
iphone6/7/8/plus——smaller
Galaxy Fold——larger
.mobile-image{
display: block;
}
.desktop-image{
display: none;
}
@media only screen and (max-width: 600px) {
.mobile-image{
display: none;
}
.desktop-image{
display: block;
}
}
Try this css code.
1 Like
Hi bro, thank you very much, but the display is the same as before.
And, I think the problem is with the red code below, the blue code just differentiates which image to display on different terminals. The problem I have now is that different images can be displayed on PC and mobile, but different sizes of images can be displayed on different phones. The black code below has width=325PX. This code can force the image to a certain size, but this is only suitable for a certain type of phone. Once the model is changed, the display will change. So I think the problem is in the black code, which should not specify a specific width, but should be a piece of code that allows the image to adapt to the screen size.
I used the Dawn theme and the code was added to in Sections >> main-product.liquid>> line 338, as shown below.
.mobile-image{
display: block;
}
.desktop-image{
display: none;
}
@media only screen and (max-width: 600px) {
.mobile-image{
display: none;
}
.desktop-image{
display: block;
}
> }> > >
> >
> > >
>
> > 
