how can I show the annoucement bar only on desktop not on mobile ?

[Martin299]

how can I show the annoucement bar only on desktop not on mobile ?
thanks in advance

[BSSCommerce-B2B · Accepted solution]

Hi @Martin299, 
change your code from

 to 

<style>
@media only screen and (max-width: 600px) {
  .announcement-bar {
    display: none;
  }
}
@media only screen and (min-width: 601px) {
  .announcement-bar {
    display: flex!immportant;
    justify-content: start!important;
  }
}
</style>

If it helps you, please like and mark it as the solution.

Best Regards

[pierrewebdev]

The easiest way to do this is to use a CSS Media Query. You can find the CSS class for the announcement bar (this different by theme but it is usually something like .announcement-bar) and then use CSS to hide it on mobile.

Here's an example of some CSS you can use inside of the custom liquid section or in your custom css settings for the announcement bar.
@media screen and (max-width: 391px){
  .announcement-bar{
    display: none;
  }
}

In the example above I have hidden the announcement bar on screen sizes 391px and smaller. This would allow it to be hidden on most mobile phones but there are some phone screens that are bigger than 391px so you might need to use a higher pixel number to cover all the options.

The only other things to watch out for here is the class used for your theme's announcement bar. You will need to look into your theme's code and see what the announcement bar's class is so you can make changes to it. 

If you're not sure what I'm talking about when I say what "class" your announcement bar is using, you can google "What are CSS Classes" and you should see a few examples of what you should be looking for.