Help with Metro Responsive style

[pixelhappy]

Hello,

I'm working on a new site using Metro Pro, which you can see here:

http://www.pixelhappystudio.com/phs13/

Because client wanted header similar to existing site, I needed to add text to .site-header .widget-area and align text right. Works great in full screen but not once you get to iPad portrait, not so good.

So I need to know how to center this text in .site-header .widget-area in media queries from IPad portrait and down.

I'm not sure how to do this and would very appreciate some guidance.

Thanks so much, Yael

---

Web developer. WordPress and Genesis Junkie. Yoga lover and aspiring peace maker.

[Susan Nelson]

Hi Yael,

In the media query section at the bottom of your style.css, look for this:

@media only screen and (max-width: 1139px) {

.footer-widgets,
.site-container,
.wrap {
max-width: 960px;
}

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 688px;
}

.content {
width: 580px;
}

.site-header .widget-area {
width: 544px;
}

You can add text-align: center; to the .site-header .widget-area part. You may also need to add padding: 0; since you've got 10px of padding on the full size view.

Please let me know if you need help with it. 🙂

[pixelhappy]

Hello Susan, Thanks so much for the help. I thought I looked in my theme's style.css and wasn't finding the media queries. Clearly, I hadn't scrolled all the way to the bottom of the style sheet!

Thank you so much. I think I can sort it now that you showed me where to go.

Yael

---

Web developer. WordPress and Genesis Junkie. Yoga lover and aspiring peace maker.

[Susan Nelson]

You're welcome! 🙂

[pixelhappy]

Hmm, well, guess I can't go it alone 🙁 Since I'm using Genesis Extender, I added the following to Custom CSS:

@media only screen and (max-width: 1139px) {
site-header .widget-area {
text-align: center;
padding: 0px;
}
}

and yet there is no change. Do you know what I'm doing wrong here? Seemed pretty straight forward but guess not 🙁

Yael

---

Web developer. WordPress and Genesis Junkie. Yoga lover and aspiring peace maker.

[Susan Nelson]

I've never used the Genesis Extender plugin, so I'm not very sure what to suggest. However, when I view your CSS, I don't see the new code in the actual media query section. Just to test, can you go ahead and add it to the actual style.css file and see if it works?

[pixelhappy]

Sure I can. I edited the actual style.css file and simply added the additional styling to the .site-header .widget-area, but still no change on front end. I'm sure this is easy, just not sure what I'm missing.

.site-header .widget-area {
width: 544px;
text-align: center;
padding: 0px;
}

---

Web developer. WordPress and Genesis Junkie. Yoga lover and aspiring peace maker.

[Susan Nelson]

When I add !important to it, it works. That means there's something overriding the new code. Is it still in your custom CSS (Genesis Extender)? If so, try removing it from there to see if it works.

[pixelhappy]

High five, Susan! It works 🙂 Thanks so much for your help. I really appreciate it.

Yael

---

Web developer. WordPress and Genesis Junkie. Yoga lover and aspiring peace maker.

[Susan Nelson]

Woohoo! 🙂 You're welcome!

[Author]

Posts