Venture Theme - Announcement Bar - Different Text for Desktop and Mobile

[guyv]

Hi All!

Please can someone assist me.

I have an announcement bar on my website and I would like to find out how to display different text in the announcement bar on mobile view compared to desktop view.

Thanks in advance!

www.electricrideco.com

[made4Uo]

Hi @guyv ,

Try this tutorial I have on how to download custom font and assign font to specific element.

How to add a custom font to a Shopify theme 2024

To assign to only mobile use the code below as reference

@media only screen and (max-width: 750px) {
.your-selector {
font-family: "your font"
}
}

[Dan-From-Ryviu]

Hi @guyv , you can do that by adding 2 notifications on the header file, one appears on the desktop, and one appears on mobile only.

[DelightCart]

@guyv May this help you. Click Here.

[diego_ezfy]

@guyv , do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (max-width: 749px){
    #NotificationPromo .notification__message{
    font-size: 0;
}

#NotificationPromo .notification__message:after{
    content: 'This is a different text';
  
    font-size: 12px;

      display: block;
    text-align: center;
}
}

You can change the text between single quotes to anything you wish.

The 12px is the font size for mobile.

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

[guyv]

@diego_ezfy
@DelightCart
@Dan-From-Ryviu
@made4Uo

Thanks everyone for your replies!