Clever Geek Handbook

CSS image width 100% but still has some background

I have the following website:

www.thewhozoo.com

It works great on a table, but for some reason in the mobile browser it has a gray canvas on the side.

enter image description here

I have the following code:

CSS

body {
    background-color: #4B5961;
    width: 100%;
    margin: 0;
}

.top-container {
    float: left;
    width: 100%;
    background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
  }

Html

<body>

    <div id="image-head" class="top-container">

The gray down line matches the background color of the body ( #4B5961

).

As you can see, I have my body width and background image width set to 100%

. So I didn't expect to see a gray line. I think this is the result of the scrollbar.

If anyone can advise on how I can remove this, I would appreciate some help.

+3


source to share


4 answers


Check your style in this css rule, take out padding-left: 10px;

:



.wz-title {
    color: #B2D137;
    font-weight: bold;
    /* padding-left: 10px; */
    font-size: 110%;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.7), 0px 0px 1px rgba(0,0,0,0.4);
}
+3


source


Remove the gasket with .wz-title

. For some reason, removing the add-on fixes it.

.wz-title {
  padding-left: 0;
}


Here:

preview

+3


source


Set overflow-x: hidden; on your body, this will fix:

body {
overflow-x:hidden;
}
0


source


Try the following:

body, body * {
    box-sizing: border-box;
}

Using the above code, you will never run into any problem when completing . :)

0


source






More articles:


All Articles