How To Reduce Margins On Smaller Screen

[njdubois]

If you go to www.leadfootgearjammers.com, you can see the page I'm talking about.

 

On a big screen everything looks great, on a small screen, it smashes everything together, but yet there is still inches of margin. Whats the easiest way to reduce the margin by an inch?

 

Thanks so much!

 

Nick

 

Its all html, but here is the css:

 

html { 
 background: url(background.png) no-repeat center center fixed; 
 -webkit-background-size: 55%;
 -moz-background-size: 55%;
 -o-background-size: 55%;
 background-size: 55%;
 background-color:black;
}


body {
     height: 100%;
     margin: 0;
 font-size: 12px;
 line-height: 1.5;
 color: #878484;
 font-family: "Droid Serif", sans-serif;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
    }

    #wrapper {
     min-height: 100%; 

    }

.header {
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.),to(rgba(25,25,25,0.));
 min-height: 60px;
 min-width: 100%;
}

.header_menu {
 padding-top:1px;
 padding-bottom:1px;
 margin-left: 21%;
 margin-right: 21%;


}
img.middle {vertical-align:middle;}

img.thumbnail {
 margin:5px;
 height:100px;
}

menu_item {
 color: white;
}


a:link {
 font: normal 0.9em/1 "Kreon", serif;
 text-transform: uppercase;
 color: white; text-decoration: none;
 margin:14px;
}
a:visited {
 font: normal 0.9em/1 "Kreon", serif;
 text-transform: uppercase;
 color: white; text-decoration: none; 
 margin:14px;
}

a:hover {
 font: normal 0.9em/1 "Kreon", serif;
 text-transform: uppercase;
 color: red; text-decoration: none; 
 margin:14px;
}

a:active {
 font: normal 0.9em/1 "Kreon", serif;
 text-transform: uppercase;
 color: red; text-decoration: none; 
 margin:14px;
}
.container {
 overflow:auto; 
 margin-left: 21%;
 margin-right: 21%;

}

#left { width: 65%; } 
#right { width: 31%; } 
#left  { float:left;  }
#right { float:right; }

.body_item_header {
 margin-top:25px;
 font-size:20px;
 color: white;
 text-shadow:0px 1px 15px #000000;

}
.body_item {
 border:solid 1px #333333;
 -moz-border-radius-topleft: 2px;
 -moz-border-radius-topright:2px;
 -moz-border-radius-bottomleft:2px;
 -moz-border-radius-bottomright:2px;
 -webkit-border-top-left-radius:2px;
 -webkit-border-top-right-radius:2px;
 -webkit-border-bottom-left-radius:2px;
 -webkit-border-bottom-right-radius:2px;
 border-top-left-radius:2px;
 border-top-right-radius:2px;
 border-bottom-left-radius:2px;
 border-bottom-right-radius:2px;
 background-color: rgba(0, 0, 0, 0.;
 padding:10px;
}

.youtube_thumb {
 border:solid 1px #333333;
 -moz-border-radius-topleft: 2px;
 -moz-border-radius-topright:2px;
 -moz-border-radius-bottomleft:2px;
 -moz-border-radius-bottomright:2px;
 -webkit-border-top-left-radius:2px;
 -webkit-border-top-right-radius:2px;
 -webkit-border-bottom-left-radius:2px;
 -webkit-border-bottom-right-radius:2px;
 border-top-left-radius:2px;
 border-top-right-radius:2px;
 border-bottom-left-radius:2px;
 border-bottom-right-radius:2px;
 background-color: rgba(0, 0, 0, 0.;
 padding:10px;

 align;center;
}

audio { width: 200px; }

 

This is my first attempt at using CSS, so if there is some blatant problem please be gentle =P

[Adam]

Your .header and .container elements specify a percentage width, so no matter how large the screen they'll take up a combined 42% of the screen:

 

.container {
  overflow:auto; 
  margin-left: 21%;
  margin-right: 21%;
}

 

You can either specify a pixel/em value for the left and right margins, or you can set them to "auto", and specify the width of the .container and .header elements.

[Scott_S]

This should probably be moved to css board.

[Love2c0de]

You can also set your rounded borders like this:

[indent=1]				
-webkit-border-radius: 2px;
  -moz-border-radius: 2px;
   -ms-border-radius: 2px;
    -o-border-radius: 2px;
       border-radius: 2px;				[/indent]										

 

You can just style them like this because ALL of your values are the same for ALL corners. Give it a try, will make your code a little smaller

[smallc28]

might not agree with me on this but I would have used <div> and <table> method because tables is still effective if you ask me.. plus its faster and away clean .....anways next time when you're designer a website using all divs press ctrl + you'll see your divs tend to move across the page because there's not container around it or them to hold them in place...I've seen your site and saw some of your work slide out of place....

 

<div align="center" id="wrapper" width"" height"">

<table>

 

</table>

</div>

[smallc28]

tables will fit any screen and hold its position

[njdubois]

wow, thanks for all the awesome help!!

 

One last CSS question, is there a compatability test app or website? somewhere I can paste my code to see what is causing a problem with what browser?

 

thanks again!

 

Nick

[njdubois]

If you wanna see what I'm talking about, look at the site in internet explorer =(

[Adam]

The backgrounds are transparent because you're using rgba values, which some versions of IE (probably all except 9) don't support. Fortunately with CSS, any property value that isn't valid is ignored. That means you can stack up multiple values for the same property, with your safety first:

 

background: #000000;
background: rgba(0, 0, 0, 0.; /* IE will ignore this */

 

Edit As for the tool you mentioned, Browser Shots is useful for testing your website looks okay across a wide range of OS' and browsers. Unfortunately though there's no tool that can tell you what's actually wrong. You have to work it out.

Edited December 3, 2012 by Adam

[njdubois]

I think i did to much to fast in once browser, and should have done each part at a time and tested in each browser. I really bit myself by not checking what I was doing as I did it.

 

Tomorrow I am going to start from scratch, build each element and make it look right in each browser. Maybe tonight I'll do some more reading up on CSS, a little more research never hurt!

 

Thanks for the help guys. I'll keep you updated!