(Squarespace) How to set different text for Desktop – Mobile on Announcement Bar

To set different text for Desktop Mobile on Announcement Bar, you can do these.

You can also use this tool so you won’t need to use custom code to set different announcement bar text.

#1. First, add 2 Paragraphs to Announcement Bar.

#2. Next, use this code to Custom CSS.

div#announcement-bar-text-inner-id {
    p:nth-child(2) {
        display: none;
    }
    @media screen and (max-width:767px) {
        p:nth-child(1) {
            display: none;
        }
        p:nth-child(2) {
            display: block;
        }
    }
}

1 Like