Hello.
I have inserted a custom image through the “custom liquid” section on my homepage using this code:
<img src="https://cdn.shopify.com/s/files/1/0655/5061/4770/files/Untitled-1_133b85f8-2145-44d0-8477-d03ff12b3710.jpg?v=1696813581" width="1080" height="1080">
Yet when viewed on mobile, the image is cropped. I have tried to use resizing code such as:
@media screen and (max-width: 600px) {
img {
width: 100% !important;
}
}
But it distorts the image, squishing it into the correct width but keeping the height the same.
Is there a way for me to resize it where it keeps the aspect ratio correct, and fits inside a mobile screen? Please help!!
This is the theme: https://5fot7mhkff27qfsi-65550614770.shopifypreview.com
Thankyou
Please remove
width="1080" height="1080"
in your image script so the code will be like this
Hi Dan,
This worked!! Thankyou. I have a few more questions.
Do you have a way to make the image full width on desktop?
And can I make the image a clickable link?
Hi @merchantman2
You can change your image code to this one to make it full width and clickable, please add the link you want in a href tag
Hi @Dan-From-Ryviu thankyou so much!!
One last question - do you know how I can centre the image? Thankyou again
And is there a way to have different widths for mobile and then desktop? For instance, if I want the width on mobile to be 60% and desktop to be 40%?
Hi @merchantman2
You can try this code
Give me preview link again
Where is that image section?
It is the “new arrivals” text. It is a PNG image
This code does not centre it unfortunately
Did you open variation and check?
