Style Extra Elements for Mobile Device

Hi there,

I made a couple of changes to the CSS of the Small Bar above the main menu and I’m having some issues.

I added the following under General Styling > Quick CSS:

.phone-info {
margin: auto !important;
font-weight: bold;
line-height: 40px;
font-size: 36px;
}

That looked great in the desktop browser but it was far too big on my mobile device. So, I borrowed the styling from this thread (https://kriesi.at/support/topic/responsive-logo-2/) and tried to apply it immediately AFTER the CSS I listed above. Here’s the Quick CSS I came up with for that:

@media only screen and (max-width: 767px) {
.phone-info {
margin: auto !important;
font-weight: bold;
line-height: 22px;
font-size: 16px;
}}

The problem I’m having is that while it now looks just like I want on my mobile device, the styling for the desktop has changed.

Under Advanced Styling > Small Bar above Main Menu, I made the following changes:

Font color – #FFFFFF
Background – #FF0000
Border – None

Now, when I reload the webpage in my desktop the text in the small bar above the main menu is no longer white, but gray. The background is not red, but white. However, in my mobile device, the background of the small bar is red and the text is white which is what I want.

So, my question is what is the Quick CSS I should be using that would allow me to style for mobile devices without affecting the styling of what I see in a desktop browser?

Thanks.

• This topic was modified 10 years, 2 months ago by Yigit.