How to hide a hero image in mobile view on Theme Kingdom?

Store Design
,
1

Hi! In the mobile version of the website, I need to hide the hero image from the homepage because the image is not responsive and the theme doesn’t support “focal point”. How can I go about doing this? The website is https://casakanvas.cl/.

Thanks

2

Hi @franaldea , you can hide that section by adding this code in Online store > Themes > Edit code > Assets > theme.css or theme.css.liquid (add code at the bottom of file)

@media only screen and (max-width: 767px) {
#shopify-section-template--16472905908482__1628781966b6fb8bab { display: none !important; }
}
3

Hi,

Here’s the code to hide the hero/slider section on mobile.

@media screen and (max-width: 767px) {
  .template-index .mount-slider {
    display: none;
  }
}

To add this to your store, follow these steps:

  1. Go to Online Store > Themes > click “Edit code” for the main theme.

  2. Search for theme.css, and open a file named theme.css.

  3. At the end of the file, put the above code

  4. Save and check your store.

I hope this helps.

4

@franaldea

oh sorry for that issue can you please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media (max-width: 768px) {
#shopify-section-template--16472905908482__1628781966b6fb8bab {
display: none !important;
}
}