Prestige Theme Announcement Bar (Responsive Text-Align)

Store Design
1

Hi Everyone,

I’m having some trouble making text responsive on mobile using the prestige theme (announcement bar)

Here’s code from the Theme.css file that I’ve adjusted to align-right rather than center. I’d like the code to remain center aligned on mobile devices.

/**

  • Announcement bar

*/

.AnnouncementBar {
position: relative;
text-align: right;
font-size: calc(var(–base-text-font-size) - (var(–default-text-font-size) - 10px));
z-index: 1;
}

.AnnouncementBar__Wrapper {
padding: 8px 8px;
}

.AnnouncementBar__Content {
color: inherit;
margin: 0;
}

@media screen and (min-width: 641px) {
.AnnouncementBar {
text-align: center;
font-size: calc(var(–base-text-font-size) - (var(–default-text-font-size) - 11px));
}
}

I thought that adding the text-align center above would do this but unfortunately, not.

If anyone can help out I’d really appreciate it!

Thanks.

2

Solved - I mixed up the align-text placements.

Here’s the code in case anyone needs it in the future.

.AnnouncementBar {
position: relative;
text-align: center;
font-size: calc(var(–base-text-font-size) - (var(–default-text-font-size) - 10px));
z-index: 1;
}

.AnnouncementBar__Wrapper {
padding: 8px 8px;
}

.AnnouncementBar__Content {
color: inherit;
margin: 0;
}

@media screen and (min-width: 641px) {
.AnnouncementBar {
text-align: right;
font-size: calc(var(–base-text-font-size) - (var(–default-text-font-size) - 11px));
}
}