css responsive width creating extra space in right margin

2 Views

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

Here’s some of the relevant css:

Read More
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!

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. I found the offending object, width was a div buried in the middle of the page (social-icons) that wasn’t being resize for smaller viewports. Thanks to everyone who helped keep me focused.

  2. Check your css on .form-search. You have a fixed pixel width of 219px with a margin-left of 80%.

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

    Combining a pixel width with a percentage margin is a sure way to create an element wider than 100%.

    Have you tried using the web inspector? It’s an integral part of web debugging, I would highly suggesting learning to use a web inspector so you can find these types of issues yourself (Stack Overflow is not a debugging engine).