[Resolved] "Row background extends to full width" not working in Beta 4

[Author]

Posts

[triggeru571]

I am trying to: Display a hero unit in Layout Beta 0.4 using "Row background extends to full width"

I visited this URL:

I expected to see: My background colour stretching the full width of the page.

Instead, I got: My background colour same as container width.

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Can you please provide a URL to see a working example? So I can look for the HTML being output and can find a solution for this.

[triggeru571]

Sure but van you enable the private details area for that please

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

I have enabled your next reply as private, please input all details in that area.

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for providing the access information.

Please see the attached image. You can see the red big top area confined to the container width. Also notice the highlighted areas in browser's inspect element tool.

When an element is set to position:fixed, it doesn't follow the dimensions of it's parent. So for the demonstration purposes, I just unchecked the 'position: fixed' style definition in the inspector tool.

You can apply following CSS definition in your theme's style.css:

.navbar-fixed-top, .navbar-fixed-bottom {position: inherit;}

To limit the width to the parent container.

[triggeru571]

Hi Waqas,

Thanks but I think I did not explain myself well. The navigation bar is working as it should. It expands the whole screen. What is not working is the Grey area below it which should also expand the full width. I am pretty sure there is a bug here as this feature works in the Alpha version but not in Beta. Have a look at the screenshot as it might explain it better. Cheers

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Actually, Layouts follow the Bootstrap definitions, where .container is set to be responsive. In responsive manners, .container has a width of 1170px for screen sizes 1200px or above.

Since, every element is further contained in a DIV with .container class, it confines the area as inherited. While the header is using a fixed position, that's why it rules out the inheritance.

However, you can apply following CSS to make that area as wider as the page:

body div.container:first-child {
    width: 100%;
}

This will expand the first container width to full width, as well as the containing elements will span accordingly. To confine the contained elements to their previous widths (i.e. original 1170px container width), you can add following CSS too:

#home_well .container {
    width: 1170px;
}

Please note, the row behavior selection depends on the behavior of the parent container.

[triggeru571]

Hi Waqas, Yes I guess it makes sense. I am remembering that in the Alpha version the navbar was not fixed so perhaps thats why it worked. I will have a play with it but after new year 🙂 Have a great one.

[triggeru571]

actually I'm being pig headed now so sorry if I reopen this. I've just changed my navigation to static just to match what I have on the alpha site and its still not working. Have a look at the home page on the alpha site and you can see that the backgrounds span the entire page hidden link.

The differences between the two installs are:

wpwindow is using your own testing template and I beleive bootstrap 3

do you have a toolset bootstrap 3 template I can use as all that is available for download at the moment is bootstrap 2.

Thanks