What CSS/jQuery to use to avoid website cutting off for users with low screen resolution?

Question

I want a gray border around the site for users with the screen landscape to handle it, but the content is the most important thing that must appear - especially for those who do not have a wide enough screen (the border should simply not show for them or be cut off or whatnot). My current CSS always uses 200px on the left and right. I tried switching it to a percentage but it still just uses that. If I switch to specifying width in the body and not content that doesn't fix it either.

Here is the code for my existing site: http://jsfiddle.net/syQgH/1/, the relevant CSS is shown below:

body {
  background-color: #e1ddd9;
  font-size: 12px;
  font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
  color: #564b47;
  margin: 20px 200px 20px 200px;
}
#content {
  width: 100%;
  padding: 0px;
  text-align: left;
  background-color: #fff;
  overflow: auto;
}

Here is the full page result: http://jsfiddle.net/syQgH/1/embedded/result/

Users with smaller screen widths will see it cut off on the x-axis and a scrollbar on the y-axis. I know about adding overflow-y to add a scroll bar on the x-axis, but ideally, I can have dynamic gray space around the site that is 140px where screen landscape allows but little or none where it doesn't. I presume I should use percentages for this rather than fixed pixel values, but this seems to have the same effect as I do not want it to take effect for users without enough screen landscape.

I am open to a JavaScript/jQuery solution.

Answer 1

What you could consider is using CSS media queries in order to make your site responsive to the user's viewport size.

For example, in your CSS you could have something like this:

/* Place your base CSS styles */
    
@media (max-width: 800px)
{ 
   /* styles for devices with screen smaller than 800px */ 
}
    
@media (max-width: 600px) 
{ 
   /* styles for devices with screen smaller than 600px */ 
}

Unfortunately, this can be difficult to achieve with a table-based layout, which is what seems to be the case with your linked JSFiddle. Inline styles (e.g.: <div style="..."></div>) are also difficult to cascade over with media queries without using the !important directive (which is generally considered a bad practice).

If it's possible, I would consider rewriting your HTML as a div-based layout with CSS classes instead of inline-styles, and then implementing media queries to solve this.

Having said that, you could try something like this for an interim solution:

@media (max-width: 600px) 
{
   #frmLogin table img 
   {
      display: none;
   }
   #frmLogin table td > div
   {
      width: 200px !important;
   }
   #frmLogin hr
   {
      width: 200px !important;
   }
}

Here's the JS fiddle: http://jsfiddle.net/syQgH/2/