Full with coloured background

[KatrineBB]

Hi,

Regarding this page: http://www.designstudio.dk/corona/

I need help expanding my background colour to full width.

I use this:

<div style=”padding: 12px; background-color: #a35; line-height: 1.4;”>

Content

</div>

But it’s not full width even though the rest of the page is. Tried making the width of the div 100% with no luck. Any suggestions? Any cool snippets?

Thanks in advance.

Have a great weekend! 😀

BR Katrine

[scrambler]

he rest of the page is NOT full width. you have a rule

body.page-id-5 #content {
    margin: -50px 0px 10px;
    overflow: hidden;
    padding: 0.5em 4% 0px;
}

That creates a 4% left and right padding on all the content.

remove that padding and it will be full width 🙂

[KatrineBB]

You are the best, Scrambler!! 😀

What a stupid mistake. Must have been in my attempt to remove the space bestween the slider and the menu bar.

I know this should be in a new thread but… how do I remove the white space between the slider and the coloured box/band then?

[scrambler]

The space comes from an empty paragraph tag that is between the slider and your colored div.

This is probably automatically added by WP.

Go to your page editing page, Check the Option “Allow Raw HTML and Script” to disable WordPress auto formatting.

Then switch the content editor to text mode, and make sure there are no paragraph tags and extra line return between the slider and the div.

That should get rid of the paragraph tag.

[KatrineBB]

Hmm, that didn’t do the trick

This is the raw HTML:

<p style=”text-align: center;”>[masterslider id=”1″]</p>
<div style=”padding: 12px; text-align: center; line-height: 1.4; box-shadow: 2px 4px 6px rgba(0,0,0,0.4); background-color: rgb(180, 51, 85);”>
&nbsp;
<h2>Hvad er på menuen i dag ? Havre med morbær og vanilje (eksempel)</h2>
&nbsp;
</div>
<div style=”padding: 12px; line-height: 1.4; box-shadow: 2px 4px 6px rgba(0,0,0,0.4); background-color: rgb(170, 51, 85);”>
<div id=”mycont”>
<div class=”mywidget mywidget-1″>
&nbsp;
<h1 style=”text-align: left; padding-left: 30px;”>Vi introducerer…</h1>
<h1 style=”text-align: left; padding-left: 30px;”>WOODLAND WONDERS</h1>
<p style=”text-align: left; padding-left: 30px;”>Woodland Wonders er skabt som en hyldest til skoven og naturens spisekammer. Vores filosofi er at skabe produkter, der er med til at understøtte naturens kredsløb, fremme den økologiske balance og bevare den biologiske mangfoldighed. Vi fokuserer på ingredienser, der vokser vildt på enge, buske og træer, og som ikke er dyrket ved agerbrug. Alle vores produkter er 100% økologiske, gluten- og mælkefri.</p>
</div>
<div class=”mywidget mywidget-2″ style=”text-align: center;”>
&nbsp;
GRAFISK ELEMENT TEST
&nbsp;
<a href=”http://www.designstudio.dk/corona/wp-content/uploads/2015/08/Kurv.png”><img width=”210″ height=”210″ class=”size-full wp-image-35 aligncenter” alt=”Kurv” src=”http://www.designstudio.dk/corona/wp-content/uploads/2015/08/Kurv.png”></a></div>
</div>
</div>

Can you spot the problem? Is it something in the coloured box html? (don’t know the correct term)

[scrambler]

Well, Why are you putting the slider in a paragraph tag ? this will automatically add the default paragraph bottom margin to it causing a space.

More importantly why do you need to style the slider with text-align:center? it is full width, so centering is meaningless so use either of the 3 solutions below

Just the shortcode should suffice

[masterslider id=”1″]

or if the style is really needed

<span style=”text-align: center;”>[masterslider id=”1″]</span>

or

<p style=”text-align: center;margin-bottom:0;”>[masterslider id=”1″]</p>

[KatrineBB]

Yep, that did it.

When I centered the text below in the visuel editor, the masterslider shortcode must have been centered too. I know it’s not neccessary as it is, like you say, a full width slider. I had no idea that could cause white space like that. Sometimes odd things happen when swicthing between visuel and text editor. I often experience <br> and &nbsp; disappearing or changing places between switches.

But thank you so much – I really appreciate your help! I get smarter and smarter every time 😉

[scrambler]

If you use text mode either never go back to visual, or check the page option “allow Raw HTML and script” Or else, WordPress will mess up your code with automatic formatting

[KatrineBB]

Hi again,

How do I make the coloured boxes same width as the theme – without the content gets the same width.

It’s probably crazy easy – but I can figure it out – as padding to the content gives padding to the boxes as well.

Thanks in advance.

BR, Katrine

[scrambler]

The link to your site is not working, and you need to elaborate.

By having a padding on your div container, your content should not be going to the edge.

If what you mean is that you would like the content of the div container to be limited to a maximum width like 900px so that as the browser gets smaller the space on the side will be eliminated, then you need to use nested divs. Th top container which is full width has the color, then you have a second div inside with a max width and centered using margin.

It would look something like

<div style=”background-color:grey;width:100%;”>
<div style=”margin:0 auto;padding:12px;max-width:900px;”> Content with limited width centered in the colored full width div</div>

</div>

[KatrineBB]

http://www.designstudio.dk/corona/om-os/

I want the purple box to be the same width as the site (1300px / 100%) but i want the text content OUTSIDE the box (not inside – sorry, bad explanation) to have some padding in each side.

Did that make more sense? 🙂

I managed to make the box full width – but now the text clings to the edge too.

[scrambler]

Sorry, I dont follow.

Your purple box has a 12px padding all around so the next never gets to the edge…

[KatrineBB]

Okay, another example

http://www.designstudio.dk/corona/blog-2/ or http://www.designstudio.dk/corona/shop/

The titles, ths prdoucts and the post grid clings to the edge. I would like an allround padding that doesn’t affect the width of the coloured boxes http://www.designstudio.dk/corona/om-os/

I’ve put som padding on my #twocont div on the other pages – so there it is not a problem anymore 🙂

[KatrineBB]

Hmm – something must have messed up the twocont now. Shrinking the page to mobile view size adds a large right padding, the further down the the container you get. D****it :S

Same issue here http://www.designstudio.dk/corona/vores-kunder-siger/

[scrambler]

First let me say that if you want to design full width sites, you should consider switching to XTreme now as it has that feature built in an will make things a lot easier.

With Weaver II, you will have to manage these paddings manually.

Depending on which pages have these colored boxes, it probably makes more sense to have some padding applied globally using the theme options, and only remove it in the pages that will have full width colored boxes  with a specific rule like below placed in Advanced Options > Head Section > Custom CSS Rule box.

.page-id-xxx #content {padding-left:0px;padding-left:0px;}

replacing xxx by the page ID number.

Like that you keep the content padding everywhere else, and only remove it in pages with full width colored boxes. In these pages, all content will have to be wrapped in a div that adds the padding back.

[Author]

Posts