full width background colour?

Hi, I'm trying to make a custom HTML module have a background colour that spans the entire width of the browser window.

I've added the required background colour to my override.csss as follows;

Code: Select all

#gkMainbodyTop {
background: #f8f8f8;
}

But it doesn't go across the full width of the browser window?

background-width.PNG

Thanks

Hi,
try to increase width using max-width:100%; for this class.

I already tried that - it has no effect for some reason.

I can see it working for the "We turn ideas into our work" module in the demo?

Thanks

My code works, but it request to use right class.

Because by default in code you will find

.gkPage {
max-width: 1150px;
}

For example use following code for bottom5 position:

Code: Select all

#gkBottom5 .gkPage {
    max-width: 100%;
}

check using firebug class'es on selected by you position

Thanks Oscar. I think I can see what the problem is - the module I'm using is adding "custom" before the gkPage - see attached;

background-width1.PNG

This is my entry in override.css;

Code: Select all

#gkMainbodyTop .gkPage {
background: #f8f8f8;
max-width: 1150px;
}

Sometimes you have to add "!important" in css rule to get work.

I've added that and I still only get a grey box around the module itself

I have to see to tell more...

new.guidancesolutions.co. uk

Thanks

Code: Select all

#gkMainbodyTop .gkPage {
    background: white;
}


and BG will be white.
and about width , but it will work for whole section, check

Code: Select all

.gkPage {
    max-width: 100%;
}

OK, that has made the background full width but also the entire content has been stretched?

Yep. This template was designed like that. sorry it wasn't me.
so now you have to center content or/and paddings inside blocks, one by one. (CSS also)

Hmm, if I remove the 100% in my override.css file then the content is not stretched? (I've removed it now so you can see the difference).

It affects all modules not just the ones I'm focusing on.

Thanks

Yep,
it's because of structure... whole content have max-width with value and were centered,

check.jpg

so when we (you) remove this global limitation, you have to add limitation again but on the lower layer.

Check this code, with my previous also

Code: Select all

#gkMainbodyTop .content {
    margin: 0 auto;
    max-width: 1150px;
}

Then "Latest News" should be okey, using this same trick, you have to fix all module positions below

Even that didn't work

I finally got it to work by placing all my homepage content in the bottom1, bottom2, bottom3 module positions as these have the correct css to make them grey alternately (and full width).

Thanks for your help with this.