Clever Geek Handbook

Css responsive width creating extra space at right edge

I have a site with responsive css, with 768px, 480px and 320px media queries. When I resize below 1040px, the same extra space appears on the right edge of the entire page, and I can't figure out where this is coming from. This is for a WordPress site. Here's a jsfiddle link .

Here are some of the relevant css:

body,
html {
  height: 100%;
  width: 100%;
  margin-left: -.01em;
}
body {
  font-family: "ff-dagny-web-pro", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 22px;
  color: black;
}
#main {
  margin: 0 15%;
}
@media only screen and (max-width: 768px) {
  #main {
    margin: 0 10% 0 10%;
  }
}
@media only screen and (max-width: 480px) {
  #main {
    margin: 0 5% 0 5%;
  }
}
#content {
  float: left;
  width: 68%;
}
@media only screen and (max-width: 480px) {
  #content {
    width: 100%;
  }
}

Thanks in advance!

+3


source to share


2 answers


I found an offensive object, the width was a div like the middle of the page (social-icons) that didn't change for smaller viewports. Thanks to everyone who helped me focus.



+2


source


Check your css for .form-search

. Do you have a fixed pixel width 219px

with margin-left

by 80%

.

.form-search {
  height: 14px;
  width: 219px;
  margin: 0em 0px 0px 80%;
  padding: 1em 0px 0px;
}


Combining pixel width with a percentage margin is a surefire way to create an element over 100%.

Have you tried using the web inspector? As an integral part of web debugging, I highly recommend learning how to use the web inspector so you can find these problems yourself (Stack Overflow is not a debugging engine).

0


source






More articles:


All Articles