Css code to hide banner on mobile and css code to hide slider on desktop

I really need both of those css codes for my website can anyone please help me? Im on google sites. Slider template= store offers and banner template= simple bannner.

1 Like

@Ricardo_Rubin here is a code for hiding a widget on mobile devices:

<style>
@media (max-width: 450px) {
.elfsight-app-WIDGET_ID {
display: none !important;
}
}
</style>

Here you need to replace WIDGET_ID with the ID of your widget and add the code to the styles file on your website.

As for hiding of your Slider widget on the desktop, I’ve shared your request with our devs. I’ll get back to you once the solution is provided.

1 Like

Im sorry but where do i have to enter that code?

1 Like

If you don’t know how to find the styles on your website, you can add this code (but without style tag) next to the widget installation code or to the Custom CSS field on the Settings tab:

@media (max-width: 450px) {
.elfsight-app-WIDGET_ID {
display: none !important;
}
}

And here is the code to hide the widget on desktop:

@media (min-width: 768px) {
.elfsight-app-WIDGET_ID {
display: none !important;
}
}

This code also should be added either to the Custom CSS field or next to the widget installation code.
Could you please check it and let me know if it worked?

1 Like

I tried it and it doesnt work, im doing this right, right?

1 Like

You need to replace WIDGET_ID with the ID of your widget

I did as you said still not working. Maybe it isnt possible on google sites?

1 Like

Could you please share a link to the page where the widgets are installed?

1 Like

I am so sorry!

Could you please try to add these CSS coded next to the widget installation codes and let me know if it helped?

Didnt work

1 Like

Thank you!

I’ll double-check it with our devs and get back to you once I receive any updates.

1 Like

Thank you.

1 Like

Hi @Ricardo_Rubin :wave:

Thank you for waiting!

Please try to add .global-styles at the beginning of the code and let me know if it helped.