Agency Pro – change width of content block on home page EXCEPT when mobile?

[kheilmann]

I recently posted a the following query:

Can anyone help me change the width of the content block on the home page here (click the Our Story button to scroll down): http://www.invisiblesunenergy.com/temp/. This is a page pulled in to the Home Middle section using the Genesys – Featured Page plug-in. It looks funny at full width. I would love to make the content block on this page narrower, but not affect the layout of other pages.

And I got a very helpful reply from a forum member:

1. Open style.css file.
2. Add following code

.home-middle .wrap {
padding:40px;
}

This fixed the problem when viewing the website on a computer screen, but my client just pointed out that the padding wrap (I increased it to 80px), while creating the desired outcome on a wide screen like a computer, makes it virtually unreadable on a mobile device because it applies this same 80px padding wrap to the tiny mobile screen.

How can I modify this code so that it only executes on a computer client, not a mobile client?

[I tried to add this to my previous forum question but the post had been closed.]

http://www.invisiblesunenergy.com/temp/

[nutsandbolts]

In the media queries section of your stylesheet, add the following to the first screen size where you want to remove the padding:

.home-middle-wrap {
padding: 0;
}

That will affect every media query below the one where you place the rule, taking off the extra padding. Hopefully that makes sense.

---

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

[kheilmann]

Thank you! I had to make some tweaks but it works well now!

[Regis_T]

Hi,

I would like to do the same, but to all content pages shown in big screens, not only the home page.

Should I use the same ccs code?

Thanks!

[Author]

Posts