Right header widget to be mobile responsive

[Herman]

How do I get the contact info in the top right widget to be mobile responsive (Executive Pro)?
Currently it runs off the screen on my iPhone.

Thanks

http://www.jackcooperlaw.com/new/

[nutsandbolts]

Look for the following in your stylesheet (near the bottom):

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

	.entry-title {
		font-size: 24px;
		font-size: 2.4rem;
	}

	.content .entry-header .entry-meta .entry-comments-link {
		display: none;
	}

}

and change it to this:

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

	.entry-title {
		font-size: 24px;
		font-size: 2.4rem;
	}

	.content .entry-header .entry-meta .entry-comments-link {
		display: none;
	}

        .site-header .widget-area {
                width: 90%;
        }

}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Herman]

Thanks Andrea...I have a follow-up question
How do I left align the contact info so it's still mobile responsive?

I tried left aligning the widget via css then adding padding but it messed by the mobile display.

[nutsandbolts]

On the 768px media query, add a float: none; for the widget area as well as text-align: center; to keep it from remaining aligned to the right once it drops below the site title.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Herman]

Didn't work for me.
I added the css to line 2285 but it made no difference.

What am I missing?

[Author]

Posts