We are facing an issue with a picture. One of our pictures on our homepage needs to be 1000x1000px.
When we view it from a mobile device the picture is of course to big to fit in the screen.
Mobile device when page is loaded:
Mobile device when we zoom out:
It would be good to see the full picture directly when we load it from the mobile device. At the same time 1000x1000px should be guaranteed because there are some link within the picture that are coded using coordinates on the 1000x1000px scale.
Picture and links are loaded using the following code (coordinates not included in this code)
| <br><br> <br><br> <br> <br><br><br> <br><br> |
| - |
1 Like
Hi @Njongen ,
This is Richard Nguyen - CRO Expert from PageFly- Advanced Page Builder. With over 5 years’ experience in providing solutions for over 100.000 stores to help merchants increase their conversion rates, I’d like to provide you with an answer with the hope they would be helpful to you:
Please add this code in the very end of the .css file to fix this
@media screen and (max-width: 767px){
table{
width: 364px;
}
table td {
height: 100%;
}
}
Moreover, in case you want to build a high conversion page on Shopify you can check our guide here and some tips to build your own loyal customers’ source.
Okay I will take a look into it, thank you for your feedback
How can I find the correct .css file?
my original code was added using the customised liquid as a section
Right now I have added the CSS code to the following two .CSS files, but nothing changes
Added the following code to the base.css file
@media only screen and (max-width: 700px) {
table{
width: 600px;
}
table{
height: 600px;
}
table td {
height: 100%;
width: 100%;
}
}
