When using width:100vw in nuxt.js there is extra white space

Question

I'm building component banner in my nuxt.js.

I tried a lot of way to solved this problem but it still not solved yet, i tried to add margin:0; and padding:0; in my html and body tag but the white space is still there. I tried another solution in this topic about using-100vw-and-vh-creates-extra-space-beyond-viewport-size-how-do-i-get-rid-of but when I try it the result is still the same. I try this topic too about 100vw-causing-horizontal-overflow-but-only-if-more-than-one but there is no luck.

this is my banner component:

<template>
  <div id="paham-banner-career">
    <div class="banner-container">
      <h2>Let's See Where You Fit In</h2>
    </div>
  </div>
</template>

this is my css:

<style lang="css" scoped>
#paham-banner-career{
    font-family: "Nunito", sans-serif;
    background-color: #3b73c5;
    width: 100vw;
    max-width: 100%;
}

#paham-banner-career .banner-container{
    margin: 100px auto;
    padding: 25px 0px;
    text-align: center;
    max-width: 1200px;
}

#paham-banner-career h2{
    color: #ffffff;
    font-size: 2.5em;
    font-weight: bold;
}
</style>

can someone save me to solve this?

this is what I got right now

Sumit Patel · Answer 1 · 2019-09-20T06:58:16.070

0

try adding box-sizing

<style lang="css" scoped>

*{box-sizing: border-box;}

#paham-banner-career{
    font-family: "Nunito", sans-serif;
    background-color: #3b73c5;
    width: 100vw;
    max-width: 100%;
}

#paham-banner-career .banner-container{
    margin: 100px auto;
    padding: 25px 0px;
    text-align: center;
    max-width: 1200px;
}

#paham-banner-career h2{
    color: #ffffff;
    font-size: 2.5em;
    font-weight: bold;
}
</style>

edited Sep 20 '19 at 06:58

answered Sep 20 '19 at 06:55

Sumit Patel

4,530
1
10
28

Thankyou for the response, where I must add it? when I try it there is nothing change – Rakish Frisky Sep 20 '19 at 06:57
i have updated my answer add the entire line in your css and check. – Sumit Patel Sep 20 '19 at 06:58
I tried to add `box-sizing:border-box` like you did but still nothing happen – Rakish Frisky Sep 20 '19 at 07:01
can you please create the snippet with the same behavior so i can check. – Sumit Patel Sep 20 '19 at 07:04
I add a my component in this fiddle but it is already work but not in my full code https://jsfiddle.net/RFTaurus/qx0ozLw1/ – Rakish Frisky Sep 20 '19 at 07:11
this means there something else in your code which have issue. you must have to produce that issue in jsfiddle then and only then we will be able to help you. – Sumit Patel Sep 20 '19 at 07:14

When using width:100vw in nuxt.js there is extra white space

1 Answers1