Agency Pro – change width of content block on home page and only for home page

[maurcol]

I found this question already but it doesn't do the trick for me. I'm fairly new to Genesis but so far i love it!

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

I want the "home middle" widget area background to be full width meaning the white box to be all width like the footer for example. (I have change the background color to green to match my background image) I'd like to keep text inside stay center align with the rest of the text like the footer.

here is my url: http://test.designnify.com/

Thanks for all the help you can get!

http://test.designnify.com/

[stinkykong]

You might try this:

.home .site-inner { max-width: 100%;}

---

Web Design by Websentia Web Services
http://websentia.com

[maurcol]

Tried but didn't do any changes! 🙁

[Lauren @ OnceCoupled]

Where did you add that code? I'm looking at your page and don't see it in effect. There is already:

.site-inner, .wrap {
     margin: 0 auto;
     max-width: 1140px;
}

This is where you should be changing it.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[maurcol]

Oh Lauren! I tried the code and didn't work so i erase it!

Thanks a lot Lauren the one you send me did the trick but now all the text in the footer bass moved to the very border of the screen and in the other pages the white box also the content moved.

How can i customize only the home page box? or if isn't possible then how do I move the content(text) inside of the box to be center like before?
I'm really learning tons of new things with Genesis.

Thanks a lot for the help.

[maurcol]

Oh and i just notice as well that those changes affect just how the website looks in my computer but when i look at it on a tablet or phone everything is like before! I will try to check if in the "@media only screen" part i can do the same changes!

[Lauren @ OnceCoupled]

Sorry, you're right, I didn't fully pay attention to all aspects of your question.

To get it on the home page only, you need to change both .site-inner AND .wrap, so you want something like:

.home .site-inner,
.home .wrap {
     max-width: 100%;
}

You'll then need to re-define the width of the other elements on your page.

.home .home-bottom,
.home .footer-widgets .wrap {
     margin: 0 auto;
     max-width: 1140px;
}

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[maurcol]

Oh this apparently did the trick 🙂 Thank you very much! 🙂 Actually doesn't change he width of the element in my iPhone but I like that way! But just in case i'd like to change it there what should i do? Just to understand better what change what! 🙂 Thank you again Lauren!

[Lauren @ OnceCoupled]

You had it right in your last post, you'll want to look at your media queries and make the appropriate changes there. 🙂

Glad to help!

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts