Search code examples
cssresponsive-designmobile-website

Website not covering full screen in portrait view

I have designed responsive website viz working perfectly in laptop and landscape view of Tab and mobile.

When I've checked that in portrait view body tag is not covering full screen, A white vertical band appear in right side of the screen.

Landscape view:

enter image description here

No error... Working Perfectly...

Portrait View:

enter image description here

Body is not covering full page....

Body tag CSS:

 body{
   font-family: 'Raleway','Arial Narrow', serif;
    width: 100%;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
    overflow-x: hidden;
    margin:0 !important ;
 padding:0 !important
    }
Solution

  • You've used box-sizing: content-box; for the class fs-container viz causing the issue, its your <body> is covering your full website but due that property on class there is white-space.

    I've used this CSS:

           @media screen and (max-width: 570px) {

          .fs-container {
              position: relative;
              width: 100%;
              padding: 0 20%;
              max-width: 100%;
              left: 35px;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
               box-sizing: border-box;
           }

            .fs-block {
               width: 100%;
            }

      }

     @media screen and (max-width: 380px) {

           .fs-container {
              padding: 0 15%;
           }

     }

    on particular media-query, please try this, it will do the trick for you.