Make Agency white content panel full width in mobile view

[jeffwaters]

Hello,

I'm using Agency Pro and would like to make the content containers for posts, pages, and widgets, etc to go full width... at least in the mobile view / size.

I do not want to see the background image peeking through on the left and right... also, this gives a little more width for a few more words per line in the content.

How would I do that?

Thanks!

Example here:

http://lifeupfront.com/2013/06/07/stop-showing-me-your-bald-spot/

[Ginger]

Hi Jeff,

Check out this section in your style.css file:

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

and look for this entry and remove it or set it to zero:

.site-inner {
		padding: 5%;
}

Make sure and test all the other pages in case it throws off something else.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[jeffwaters]

Fantastic, thanks Ginger! Worked like a charm. I ended up going with 1% as it looks a little better than having the white go completely edge to edge.

What if I wanted to also decrease the inner padding of the content area a bit (from the edge of the white container to the edge of the text)? Where would I change that (again, only to affect in mobile mode)?

[Ginger]

Use

.entry {
padding-left:
padding-right:
}

at the breakpoint you'd like for mobile.....40px is what it is now so you can reduce that to get the look you'd like.

Going forward, this tutorial might help when you're trying to identify what to change...you can change it on the fly in the browser (any browser) which is pretty cool:

How To Customize Your Genesis Child Theme with Chrome Inspector

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[jeffwaters]

Hmmm... how do I know I'm doing this for just the mobile breakpoint I want?

[Ginger]

You'll need to experiment with different media sizes. You can test this in your browser if you're using Chrome or Firefox, you can right+click and select Inspect or Inspect element to turn on developer tools. If you Google mobile website viewer or something similar that can also give you options. The iPhone 5 is 320px wide and the iPad when held portrait (tall) is 768 px wide.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[jeffwaters]

Thanks, Ginger!

[Author]

Posts