Remove the main collection image from mobile, but leave it on desktop? Possible? HELP please

Store Design

Topic summary

Main issue: Keep the collection hero image on desktop but hide it on mobile to avoid long pages.

Context: Shopify Dawn theme; store URL shared (apexanimalz.com).

Solution (consensus): Use a CSS media query in base.css to hide the collection hero image on small screens.

  • Recommended rule:
    @media (max-width: 767px) {
    .collection-hero__image-container.media.gradient { display: none; }
    }
  • Alternative selector shared:
    @media (max-width: 749px) {
    .collection-hero__description img { display: none; }
    }
  • If needed, add !important to ensure override: display: none !important;

Implementation details:

  • Path: Online Store ā†’ Theme ā†’ Edit code ā†’ Assets ā†’ base.css.
  • Placement: paste the code at the bottom of base.css.

Outcome: The original poster confirmed the fix worked; issue resolved.

Notes: One reply included a mobile screenshot demonstrating the hidden image; otherwise no additional changes were required.

Summarized with AI on January 17. AI used: gpt-5.
1

Hello

I have a slightly different problem, I hope you can help.

I want my main collection image to show on the top of collection page, but NOT on mobile. It looks much nicer on desktop BUT it makes the page too long on mobile.

Is there a way to fix this?

thank you

2

Hello @ApexMikey ,

With media query css you can do this.

If not sure how please share the store URL here

Thanks

1 Like
3

Awesome, thank you.

I can modify/paste code, cannot do much else :slightly_smiling_face:

https://www.apexanimalz.com

Much appreciated,

M.

4

Hello @ApexMikey

Can you share your store URL?

5

Yes, thank you.

https://www.apexanimalz.com

The theme is dawn.

Much appreciated,

M.

6

Follow these steps:

  1. Go to Online Store ā†’ Theme ā†’ Edit code

  2. Open your base.css file and paste the following code below:

@media only screen and (max-width: 767px) {
.collection-hero__image-container.media.gradient{
display: nooe;
}
}

7

Thanks, what part of the page do I enter it? Top, middle, bottom?

8

Bottom

@media only screen and (max-width: 767px) {
.collection-hero__image-container.media.gradient{
display: none;
}
}
9

hi, ApexMikey

Follow these steps:

  1. Go to Online Store ā†’ Theme ā†’ Edit code

  2. Open your base.css file and paste the following code below:

@media only screen and (max-width: 767px) {
.collection-hero__image-container.media.gradient{
display: none;
}
}

If you face any issue let m know

10

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

@media (max-width: 749px) {
    .collection-hero__description img {
        display: none;
    }
}

The result on mobile

Screenshot 2023-09-24 at 22.01.42.png
Screenshot 2023-09-24 at 22.01.42.png526Ɨ473 50.4 KB

Hope that helps!

11

Hi @ApexMikey

This is Richard from PageFly - Shopify Page Builder App, Iā€™d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

@media(max-width: 767px) {
.collection-hero__image-container.media.gradient{
   display: none !important;
}
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

12

Perfect, thanks!!!

1 Like
13

You are welcome! :slightly_smiling_face: