Insert a custom html section that only display on mobile view.

Solved
Highlighted
Tourist
11 0 3

Hi.

I am trying to insert a slider image on my shopify home page. I am not directly editting the code, but rather inserting a shopify custom html section.

 

The code for the image slider is the following:

<div class="ha-slider ha-slider-5f35d14c67c78 " data-slider="5f35d14c67c78" > </div>

 

I would like to display this slider only for mobile screens. How can I do that?

 

0 Likes
Highlighted

This is an accepted solution.

You should use media queries for that (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

In your case I'd do something like this:

@media (min-width: 768px) {
    .ha-slider {
        display: none;
    }
}

 

0 Likes
Highlighted
Tourist
11 0 3

Thank you very much I was already experimenting with those queries, the thing was I did not know where to write this lines of code.

 

I did it on the theme.liquid and it worked well!

1 Like