Search code examples
cssresponsive-designoverflowmedia-queries

Responsive Page - Overflow Issue


I'm trying to determine what could be causing the horizontal scroll bar to appear on this page. It only appears when I re-size the page to inherit the following media query...

@media (max-width: 979px) and (min-width: 768px)

Oddly enough, it happens when I toggle from Portrait to Landscape and back on the iPad or if I resize my browser back and forth. When I load the page the first time at this size on the iPad or the computer, it does not have a horizontal scroll bar.

Using process of elimination, I'm able to determine that it's something in the contact form at the bottom but I can't for the life of me determine what DIV it is so that I can fix it. I was even going to use overflow-x: hidden, but that doesn't fix the issue when I toggle back and forth on the iPad between orientations.

This is such a small issue and I'm hoping that I'm missing something obvious.

Any help is greatly appreciated!


Solution

  • I've just checked your page. Just check whether you've given more width ( summing: box-width+border_margin ) value of any child element form its parent element. And use overflow: hidden if you are sure about what i said. Hope you get it.