Right Header Widget Looks Horrible on Mobile Responsive site?

[swstudio]

http://tinyurl.com/ldevx9u

Anyone have a thought on how to make the home page side widget with the phone number and fax align to center?

Thank you. So stuck on this point. Don't want to remove it but may have to.

http://tinyurl.com/ldevx9u

[Porter]

In your style.css, you'll have all of your "media queries" down at the very bottom, these are essentially specific instructions for when the screen area is smaller (generally mobile). Locate your smallest media query section (should be at the VERY bottom of style.css), and add this anywhere in there:

.site-header .widget-area {
		text-align: center;
	}

site-header / widget-area are the "selectors" for the area in question, and by putting the code here, you're telling the site to center align when the screen is that size. When it's normal, the text-align is right (somewhere in your current code sets it to this, which likely looks best on the desktop view).

Let me know if that works, and if you need any more help.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[swstudio]

Thank you so much for your help. No, that doesn't work though. I'm going to call it for the week.

I would think Studiopress would design its "mobile responsive" themes with this feature. I must have coded something wrong, despite my best intentions.

Thanks.

S

[Jeremy]

In style.css line 1091...

.site-header .widget-area .widget {
margin-bottom: 0;
text-align: center;
}

---

If you want to say thanks Follow me on Twitter | My Website

[Author]

Posts