Display widget contents differently on desktop / mobile?

[FutureExpat]

Using Executive Pro theme, I have an address and phone number in the Header Right widget area. It uses Custom HTML widget, and the text is set to align right. Looks great on computer.

But on mobile, it's pretty dorky looking. Is there an easy-ish way to display it aligned right on computer, but centered on mobile??

Thanks.

https://pianotex.com

[Anita]

Add this to the Additional CSS box (otherwise before the body modification in the stylesheet).

@media only screen and (max-width: 568px) {
.header-widget-area div h5 {
    text-align: center;
}
}

---

Love coffee, chocolate and my Bella!

[FutureExpat]

Copied / pasted the above, and it generated a couple of errors. After playing around for a few minutes, I found that this worked:

@media only screen and (max-width: 568px) {
.header-widget-area div h5 {
text-align: center;
}
}

Thank you!

[Anita]

Sorry about that. I fixed mine. The code broke on the space between the div and h5.

---

Love coffee, chocolate and my Bella!

[Author]

Posts