How to show announcement bar only on mobile homepage

[vcockerham2002]

Hi there, I would like to make an announcement bar that only shows on the homepage of mobile.  TIA my site is appleblossomgiftbaskets.com 

[Dan-From-Ryviu · Accepted solution]

Hi @vcockerham2002 

I'm Dan from Ryviu: Product Reviews & QA app.

You can add this code to your theme.liquid file to make it show only on mobile homepage.

{% if template == 'index' %}
<style>
@media (max-width: 749px) {
.utility-bar .announcement-bar { display: flex; }
}
</style>
{% else %}
<style>
.utility-bar .announcement-bar { display: none; }
</style>
{% endif %}

[Dan-From-Ryviu · Accepted solution]

Hi @vcockerham2002 

I'm Dan from Ryviu: Product Reviews & QA app.

You can add this code to your theme.liquid file to make it show only on mobile homepage.

{% if template == 'index' %}
<style>
@media (max-width: 749px) {
.utility-bar .announcement-bar { display: flex; }
}
</style>
{% else %}
<style>
.utility-bar .announcement-bar { display: none; }
</style>
{% endif %}

[BrainStation23 · Accepted solution]

hi @vcockerham2002 
You can follow these steps to achieve your result 
Go to online stores -> Themes  -> Edit code->theme. liquid file
Then paste the below  code above  </head>  tag

{% if template == 'index' %}

  <style>
    @media screen and (max-width: 768px) {
     .utility-bar 
     .announcement-bar
      {
        display: flex; 
      }
    }
  </style>

{% else %}
  <style>

    .utility-bar 
    .announcement-bar
     { 
       display: none; 
     }

  </style>
{% endif %}