Question

I’m having a problem with a web page I’m working on that I’m finding difficult to describe. When viewed in a small browser window the page cuts off when horizontally scrolling to content outside the browser’s viewport. What causes this problem? How can it be fixed? Thanks in advance.

Here is an example of the problem I found in the wild:

It may be good to note that I won’t be using media queries to achieve responsive design for this page.

Answer 1

Chances are you’ve got something set to width: 100%, yet you don’t have a min-width set on the body, which causes the 100% wide elements to only be as wide as the window.

Try something like this:

body {
  min-width: 960px;
}

Or whatever the minimum width of the page is.