Full-width Content / Background-color of site-inner: but not completely

[sharkpunk]

Hello forum,

on my website: http://www.cashcademy.de I have a "landing page" called "HOME". Now, the background-color is completely in indianred, but for example I want to keep writing after "finanziellen Wohlstand zu erreichen." with the normal background-color.

For that I tried to put the first half of the side in a table style..but then, as you can see on "HOME 2" there is a white background-color on the left and the right. I can't fix this and I only want to change that for this specific page.

For "HOME" I added these CSS:

.page-id-79 .site-inner {background-color:#cd5c5c; padding: 65px 0 0 0}
.page-id-79 .site-tagline {border-bottom: none;}
.page-id-79 .site-tagline {display: none;}
.page-id-79 .home-featured {border-bottom: none;}

How can I fix this?

http://www.cashcademy.de

[sharkpunk]

Nobody who has an idea??

If you look on the side you will see three HOME buttons.

I experimented each on a different way:

HOME:

Changed .site-inner background color.

But: when I add a box it is not full width, because of .wrap. When I set .wrap to max-width:100%, the content, header and menu is exactly to the edge, that wasn't my goal.

HOME 2:

Table via html, but again:

.wrap shrinks the table and there is space on both sides.

HOME 3:

added an image on .site-tagline-right.
Problem: I can't add text to the tagline and the image isn't responsive.
And I want more of these full with bars.

Now, HELP PLS. I am an absolutely beginner and can't fix this.

[Christoph]

Hi,

sorry, your post confuses me.
I think this should put you on the right track.

There is no need for tables.
Just wrap the content that you want to have a red background in a div . Give the div a class and target that class in the style.css.
e.g. <div class="red-background">Your content with red background</div>
In the style.css add
.red-background {
background-color: red;
}

You don't have to target .wrap.
You can be more specific by adding .site-inner .wrap to the style.css.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[sharkpunk]

Hi Christoph,

sorry, the email notification for new answers landed in my spam folder.

I ve tried that, when you look now on the page, there is a div named "studiop" and there is still
margin on the left and right side.

In my stylesheet is this:

.studiop {
background-color: #4682b4;
margin-bottom: 20px;
text-align: center;
}

..........You can be more specific by adding .site-inner .wrap to the style.css........

There already is a .wrap and .site-inner in the stylesheet. How do you mean that?

[Christoph]

Hi,

no problem.

You can use

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

to "override" .wrap { max-width: 1140px;}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[sharkpunk]

thanks, how can I use that line only for the specific div?

Because now the complete site-inner is 100% width, but I only want the background of the boxes on 100%.

[mypressletechworld]

http://www.letechworld.com/how-to-make-whatsapp-service-free-for-lifetime-2016/

http://www.letechworld.com/how-to-enable-2-step-verification-in-gmail-account/

http://www.letechworld.com/how-to-enable-2-step-verification-in-gmail-account/

http://www.letechworld.com/how-to-jailbreak-ios-9-1-and-download-cydia-app/

http://www.letechworld.com/download-whatsapp-for-pclaptop-whatsapp-for-windows-788-110/

http://www.letechworld.com/download-whatsapp-for-pclaptop-whatsapp-for-windows-788-110/

http://www.letechworld.com/recover-permanently-deleted-files-without-using-any-softwares-windows-7-8-vista-pc/

http://www.letechworld.com/increase-internet-speed-in-windows-pc-laptop/

http://www.letechworld.com/blog-iot-smart-living-but-safety-first/

http://www.letechworld.com/whatsapp-tips-and-tricks-you-must-try-in-2016/

http://www.letechworld.com/li-fi-technology-100x-faster-than-wi-fi/

http://www.letechworld.com/best-music-player-apps-for-android-os-smartphones/

http://www.letechworld.com/best-antivirus-for-windows-7-8-10-pc-free/

---

http://www.letechworld.com

[sharkpunk]

hmm stupid advertising..

again:

thanks, how can I use that line only for the specific div?

Because now the complete site-inner is 100% width, but I only want the background of the boxes on 100%.

[Christoph]

Hi,

you can either add a max-width or margin/padding to the elements you don't want to have full-width.
You need to set the .site-inner .wrap to full width because it is the "box" in which all other elements of .site-inner have to fit.
(You can't punch a hole in the box for certain elements)

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts