How can I resize my collections logo image for mobile view (Refresh Theme)

Store Design
, ,
7

Hi @OrangeFoodMan ,

To ensure your hero images resize properly and are fully visible on mobile devices, you can add custom CSS to your theme. Follow these steps:

  1. Go to Online Store > Themes.

  2. Click on Actions next to your current theme and select Edit code.

Sweans_0-1722407118947.png
Sweans_0-1722407118947.png340×328 12 KB

  1. In the code editor, locate the theme.liquid file. This is typically found under the Layout folder.

Sweans_1-1722407135995.png
Sweans_1-1722407135995.png274×353 11.4 KB

  1. Scroll to the bottom of the theme.liquid file, and just above the closing tag, add the following custom CSS code:

The object-fit: contain; property ensures that the image will resize to fit within its container without cropping. If the image still doesn’t fit perfectly, you may consider using other values like cover or adjusting the image’s aspect ratio manually.

Sweans_2-1722407160072.png
Sweans_2-1722407160072.png507×174 3.53 KB

  1. Click Save to apply the changes.

This solution ensures that your hero images for collections are properly resized on mobile.

If you need further assistance, feel free to reach out

I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans