0

I've got a one page site that I'm building for myself and I've got a small but annoying (to me) bug.

I'm working on making it media query friendly, and so far what I'm learning is coming together ok. What's bugging me is that when the site is being resized horizontally, there's a part where the horizontal scroll bar flashes up.

You can see where in the screenshot. It's around the width of 767px.

scrollbar screenshot

I think it might be coming from the 1140.css file, the framework I'm using to make it responsive, but I can't figure out what's causing it or how to fix it.

You can check my site out:

http://vitaliyg.com

Vitaliy G.
  • 851
  • 1
  • 7
  • 20

1 Answers1

1

From giving it a blast in Chrome it looks like it is due to

media="screen" 1140.css:10
.container {
    padding-left: 20px;
    padding-right: 20px;
}

If these are both turned off the scroll bar doesn't appear.. for me at least.

qooplmao
  • 17,622
  • 2
  • 44
  • 69
  • Ah, yes, that works for me as well. I figured it had to do something with excess padding or margins. Thanks for looking into this for me. Hopefully commenting these out won't be too dangerous :P – Vitaliy G. Dec 01 '12 at 05:53
  • 1
    Although it's probably not ideal you could add another class to the container (or maybe even just body > .container) and then remove the padding-left/right on that. That way you may not bother anything else. – qooplmao Dec 01 '12 at 06:00
  • Since there is nothing else associated to .container, wouldn't that be just moving padding to another class? – Vitaliy G. Dec 01 '12 at 06:18
  • 1
    Yeah it would be adding the padding to an extra class but then you could use .container elsewhere and have it style the way it is supposed to rather that how you have bodged it. – qooplmao Dec 01 '12 at 06:21