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

[OrangeFoodMan]

Hi Everyone,

Could someone please help me with what I need to do to get the hero images for my collections to auto-resize so they look in a mobile view? At the moment its looking fine on my laptop but on my phone its chopping heaps of the image out.

My url is https://yourmarket.net.au/

Any help would be much appreciated.

On laptop:

on smaller screen:

Cheers

[Raj-webdesigner]

add this css in your edit code > base.css file

@media screen and (max-width:767px){
 .collection-hero .media img {
    object-fit: contain;
 }
}

[OrangeFoodMan]

Hi Raj,

Thats worked pretty well but now the images appear really small like
in the image below. I've been adapting the size of the images to
include a background of 1024px x 2048 px which makes them look good on
the desktop but small on mobile, and when i use the original image it
looks good on mobile but bad on desktop (see below). Is there any way
to make the images adapt to look good in both?

Image 1 is when its good on desktop and small on mobile
Image 2 is when its good on mobile but too big on desktop

Any more help would be amazing

Cheers,
Will

[Raj-webdesigner]

Add This css In edite code >  base.css File

@media screen and (max-width: 749px) {
    .collection-hero__inner .collection-hero__image-container {
        height: 30rem !important;
    }
}

[GTLOfficial]

Hello @OrangeFoodMan 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-collection-hero.css ----> line number 73
search this code

@media screen and (max-width: 749px) {
.collection-hero__image-container {
height: 20rem;
}
}

and replace with this code

@media screen and (max-width: 749px) {
.collection-hero__image-container {
height: 30rem !important;
}
}

 and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[vinh0225]

Hi @OrangeFoodMan 

Here is the steps for it:

Step 1. Go to `Online Store` -> Themes -> Select a theme -> ... -> Edit code

Step 2. Open assets/component-collection-hero.liquid.

Step 3. Find the following.

@media screen and (max-width: 749px) {
    .collection-hero__image-container {
        height: 20rem;
    }
}

Step 4. update `height: 20rem;` to `height: 100vw`.

That's all.

Regards,

Vinh

[niraj_patel]

Hello @OrangeFoodMan 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 749px) {
  .collection-hero__image-container {
      height: 25rem !important;
   }
 }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[hanji1]

Hi there! It sounds like you need to adjust the CSS for your hero images to make them responsive. Try setting the images to  This should help them resize properly for mobile view. Hope this helps!

[Sweans]

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.

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

4. Scroll to the bottom of the theme.liquid file, and just above the closing </body> tag, add the following custom CSS code:

  <style>

      @media screen and (min-width: 750px) {

        .collection-hero__image-container.media>img {

          object-fit: contain;

        }

      }

    </style>

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.

5. 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

[PageFly-Richard]

Hi @OrangeFoodMan 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style> 
@media screen and (max-width:767px){
 .collection-hero .media img {
    object-fit: contain;
 }
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[Huptech-Web]

Hey @OrangeFoodMan, the image you provided has a 1:1 aspect ratio, while the mobile screen you displayed the box on has a 2:3 aspect ratio. Kindly add an image with a 3:2 aspect ratio, instead of 1:1.

Thank you 
K.K