media screen help.

[CarraraWebsiteSolutions]

Hello.

I Have set my desktop with at 1200px;. But would like to know how would I fix it so the normal laptop screen width would be suitable for my header cart.

At the moment when go on to a lap top my header cart gets pushed over on to the search bar.

/* layout */
.container {
width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#column-left {
float: left;
width: 180px;
}
#column-right {
float: right;
width: 180px;
}
#content {
min-height: 400px;
margin-bottom: 25px;
}
#column-left + #column-right + #content, #column-left + #content {
margin-left: 195px;
}
#column-right + #content {
margin-right: 195px;
}
/* header */
#header {
background: #fff url(../image/bg_top_red.jpg) repeat-x top;
line-height: 25px;
text-decoration: none;
z-index: 100;
height: 130px;
margin-bottom: 40px;
}
#header-bottom {
background: url(“../image/shadow.png”) repeat-x scroll center bottom transparent;
margin-top: 0px;
margin: 13px 0 7px;
padding-bottom: 9px;
position: relative;
clear: both;
}
#header #logo {
clear: both;
float: left;
margin: 29px 0 0;
max-width: 190px;
text-align: left !important;
}
#main-header #cart {
position: absolute;
top: 20px;
right: 300px;
z-index: 9;
min-width: 300px;
}

[Paulie_D]

You’ll have to use media queries and change all those fixed pixel width and position values.

It’ll be a lot of work.

[CarraraWebsiteSolutions]

On the media queries on this site it only showed desktop widths and tablets and phones can’t seem to find ones for laptops when type in google it only shows tablets etc.

I will have another look at google.

When set media queries is it best to have them on same css sheet or link it separate. I will finish desktop version first then set laptops.

[Paulie_D]

The media queries are just examples.

In general the feeling is that you just set breakpoints wherever you think the design needs it at various screen sizes.

If that is a non-standard number (like 1035.66px) then that’s what you do.

[Author]

Posts