Issue with responsiveness in Executive theme

[audigy]

Hello all,

Having a problem getting my logo to change based on the size of the screen (responsive).

Here is the url

http://www.upallmorning.com

I thought i was doing this right but apparently I am not. What i want to happen is that as the screen is condensed, to center my logo and make it smaller. I created a mobile version of my logo as well, but even though i see it in the code it doesn't seem to be showing up properly.

Can anyone help?

Thank you

William

http://www.upallmorning.com

[rfmeier]

Hello,

I took a quick look at this in Chrome and here is what I came up with;

/* line ~2209 */
#header{
    padding-top: 30px;
    background-position: center 20px !important;
}

Here is a preivew;

https://www.diigo.com/item/image/40chg/35oh

I hope this helps.

---

Ryan Meier – Twitter

[audigy]

Cool. Would i just add a similar line for each of the breakpoints in the code for various resolutions?

 

[rfmeier]

You can actually set it at the largest resolution you want to see this behavior. As the screen gets smaller, it will just inherit the larger resolution css rules.

Media query css rules are really just overrides of the default styling.

---

Ryan Meier – Twitter

[audigy]

So if i wanted it centered at tablet level and of course mobile, i'd just add these lines to each condition besides the highest res one?

[rfmeier]

Exactly. If that doesn't feel right to you, move it down to the next resolution. Every other resolution below it will inherit.

---

Ryan Meier – Twitter

[audigy]

Works like a charm, thank you!

[rfmeier]

You are welcome. I am glad I could help.

---

Ryan Meier – Twitter

[Author]

Posts