CODEWITHSUNDEEP
css
Steve
Steve

Reputation: 1765

why is 100% width displaying outside the view port?

On this page, I have a block of 6 boxes:

enter image description here

When we reduce the view port to narrower than 1160px, this area stays at 1160px wide.

I have the following CSS:

.bouble_shaded_bg_full-width.vc_col-sm-12 {
    float: none;
    width: 100%;
}
@media only screen and (min-width: 1160px) {
    .bouble_shaded_bg_full-width.vc_col-sm-12 {
        float: none;
        width: 100vw;
        left:50%;
        margin-left:-50vw;
    }   
}

Why is the width: 100%; not being respected below view port 1160px?

Upvotes: 1

Views: 210

Answers (2)

Ganesh Yadav
Ganesh Yadav

Reputation: 2685

If you see on line no. 42. There is fixed width:1140px;. Which is causing problem. You can replce with max-width.

.bouble_shaded_bg_full-width.vc_column_container > .vc_column-inner{
    width: 1140px;
}

to 

.bouble_shaded_bg_full-width.vc_column_container > .vc_column-inner{
     max-width: 1140px;
 }

or 

@media only screen and (min-width: 1160px) {
  .bouble_shaded_bg_full-width.vc_column_container > .vc_column-inner{
     width: 100%;
  }
}

Also on line no. 73 .site-inner, .content-sidebar-wrap have fixed width:1160. Which is also not good it will give horizontal scroll it is not visible because of .site-container overflow:hodden. You can do it max-width or control by media queries.

*, *:before, *:after {
   box-sizing: inherit;
}

This property is inherit that means you have to define 'box-sizing: border-box' When you are using padding. In bootstrap they just simply apply box-sizing: border-box to everything. ('box-sizing' is just an observation not an issue.)

Upvotes: 1

Cyrille Armanger
Cyrille Armanger

Reputation: 759

Your problem comes from the display: table; on .bouble_shaded_bg_full-width

To fix it, use the following:

@media only screen and (min-width: 1160px) {
    .bouble_shaded_bg_full-width.vc_col-sm-12 {
        float: none;
        width: 100vw;
        display: block;
    }   
}

Upvotes: 1

Related Questions