Need help removing image from Image Banner on Mobile only!

[SearchGhost1738]

I don’t like how the image from the banner just sits above the container on mobile. I’d like to remove the image on the mobile view altogether.

https://coolcookiesllc.myshopify.com/

Thanks

[NomtechSolution]

To remove the image from the banner on the mobile view in the Dawn theme, you can use CSS media queries to hide the image specifically on mobile devices. Here’s how you can do it:

1. Open the theme code editor: Go to your Shopify admin, navigate to “Online Store” > “Themes,” and click on the “Actions” button for the Dawn theme. Then select “Edit code” from the dropdown menu.

2. Locate the CSS file: In the theme code editor, navigate to the “Assets” folder and find the CSS file that controls the styling of your theme. It’s typically named theme.css.liquid, styles.css.liquid, or similar.

3. Add a media query: Inside the CSS file, add a media query that targets mobile devices. You can use the @media rule to specify the maximum width at which the styles should apply. For example:

@media (max-width: 767px) {
  .your-banner-image-class {
    display: none;
  }
}

[Made4uo-Ribe]

Hi @SearchGhost1738 ,

I understand that you want to remove the image on the mobile view. This Image is the background Image of the “About Us” Section.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “theme.scss.liquid” or “styles.scss.liquid” file, depending on which file your theme uses to store its CSS styles.

At the bottom of the file, add the following CSS code:

@media only screen and (max-width:749px){
.banner__media.media {
    display: none;
}
}

I hope it help.

[SearchGhost1738]

This code did not work in the theme.liquid or theme-editor.js, but I tried putting it at the bottom of the base.css and it did remove the image, but it also removed my slideshow images as well Any ideas?

[Made4uo-Ribe]

Sorry for that can you try this instead?

@media only screen and (max-width:749px){
.banner__media.media img {
    visibility: hidden;
}
}

Result will be like this.

I hope it help.