Community Forums › Forums › Archived Forums › General Discussion › Help with Metro Responsive style
Tagged: Metro Pro, responsive header
- This topic has 9 replies, 2 voices, and was last updated 10 years, 5 months ago by Susan Nelson.
-
AuthorPosts
-
November 27, 2013 at 4:01 am #75825pixelhappyMember
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.
November 27, 2013 at 4:24 am #75831Susan NelsonParticipantHi 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. 🙂
November 27, 2013 at 4:34 am #75833pixelhappyMemberHello 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.
November 27, 2013 at 4:46 am #75836Susan NelsonParticipantYou're welcome! 🙂
November 27, 2013 at 5:06 am #75837pixelhappyMemberHmm, 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.
November 27, 2013 at 5:13 am #75838Susan NelsonParticipantI'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?
November 27, 2013 at 5:24 am #75839pixelhappyMemberSure 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.
November 27, 2013 at 5:41 am #75840Susan NelsonParticipantWhen 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.
November 27, 2013 at 7:00 am #75849pixelhappyMemberHigh 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.
November 27, 2013 at 7:02 am #75850Susan NelsonParticipantWoohoo! 🙂 You're welcome!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.