How can I remove an image on mobile view while keeping it on desktop?

Store Design
, ,

Topic summary

  • Goal: Remove the first homepage image on mobile while keeping it on desktop, because it doesn’t scale correctly.

  • Context: The requester shared a preview store URL and password so others could inspect the homepage.

  • Initial solution: A helper provided CSS to add in theme-index.min.css using a media query (@media max-width: 768px) that set the image element to display: none on mobile. This hid the image but left a blank space where the section remained.

  • Follow-up fix: A second CSS rule (also under @media max-width: 768px) targeted the entire image section container and set it to display: none, removing the leftover white space and pulling the next section (“Welkom bij Matubu Coffee”) to the top.

  • Technical notes: Media queries are CSS rules applied only at specified screen widths; display: none hides elements from layout. Code snippets were central to the solution.

  • Outcome: The requester confirmed the fix works. Issue resolved; no further action needed.

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

Hi everyone!

I have been trying to remove an image on the homepage of my website on mobile view only. I would like to keep the image on desktop view.

Can someone help me with this?

Thanks!!

1 Like
2

Hi @Felix_Ghys , can you share your store url?, and what image you want to remove?

3

Hi @Felix_Ghys

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

4

Hi!

This is the link to my store: https://064a48-4.myshopify.com/
The password is: matubusuperbcoffee

The first image you see on the home page doesn’t scale correctly on mobile
view so i would like to remove it.

Thanks in advance!!

5

Hi!

This is the link to my store: https://064a48-4.myshopify.com/
The password is: matubusuperbcoffee

The first image you see on the home page doesn’t scale correctly on mobile
view so i would like to remove it.

Thanks in advance!!

6

@Felix_Ghys , go to theme-index.min.css and add the following code :

@media (max-width:768px){
 .image-section--template--19897395708229__694cf2ae-142b-4bd4-8155-40f7816be418 .img {
    display:none !important;
}

}
7

Thanks, this works! Do you think it is possible that the next part of my page “Welkom bij Matubu Coffee” will then appear at the top? Because now the image is indeed removed, but there is white space now, which looks like a website glitch.

Thanks in advance!

8

@Felix_Ghys , add the following code

@media (max-width:768px){
     .image-section.image-section--template--19897395708229__694cf2ae-142b-4bd4-8155-40f7816be418.image-section--large.wow.animated {
    display: none !important;
}

}
9

Thank you! This works like a charm :slightly_smiling_face:

1 Like
10

Glad I helped, feel free to contact me if you need any help.