Help me fix a layout

[frankman]

My friend asked me to help fixing his site because it has CSS problems. It looks great on full screen with 1366×768 but on larger resolution every element is moving strangely.

It has an another strange anomaly. When i’m not using the browser on full screen and i try to resize the browser window the site goes crazy. Nothing stays at the same place.

It’s a WordPress site with a modified theme and we want a fix layout instead of this madness.

I tried everything what i could but nothing helped. Please help me solving this annoying CSS issue. I want a layout which has fixed size and looks the same on every resolution (and every browser window size). How can i “pin down” the elements?

The site address is: http://mcwcarlimo.com

Thank you for your help!

[JoniGiuro]

I think andy is right. In your css you have:

/* =Layouts

---

*/

/* One column */
.layout-1c #content {
float: none;
margin-right: 0;
width: 100%;
}

/* Two columns */
.layout-2c-l #content,
.layout-default #content {
float: left;
width: 660px; /* 4% for margin */
}
.layout-2c-l #sidebar-primary,
.layout-default #sidebar-primary {
float: right;
width: 317px;
}
.layout-2c-r #content {
float: right;
}
.layout-2c-r #sidebar-primary {
float: left;
}

}

/* =Layout for desktop version

---

*/

@media only screen and (min-width: 1024px) {

/* Layout width */
#menu-primary .wrap, #menu-secondary .wrap, #menu-secondary div.menu {
}
#menu-primary div.menu {
width: 900px; /* 1px border on the left and right */
}
#main .wrap, #header .wrap, #sidebar-subsidiary .wrap, #footer .wrap {
padding: 0 24px;
width: 978px; /* 852px + 24px + 24px = 902px */
}
#sidebar-subsidiary .wrap {
padding: 1em 24px 0;
}

#sidebar-primary .widget {
background: #f9f9f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 0.5em solid #f2f2f2;
-moz-box-shadow: inset 0 0 2px #ccc;
-webkit-box-shadow: inset 0 0 2px #ccc;
box-shadow: inset 0 0 2px #ccc;
margin: 0 0 1em 0;
padding: 2%;
}

#sidebar-primary .widget .widget-wrap {
padding: .5em;
}
#menu-primary li a {
padding: 1.09090909em 1.68181818em; /* 12px / 11px = 1.09090909 and 24px / 11px = 2.18181818 */
}
#menu-secondary li a {
padding: 0.909090909em 2.18181818em; /* 10px / 11px = 0.909090909 and 24px / 11px = 2.18181818 */
}

.widget-tabs ul.tabs {
margin: 0;
}

/* Comments for desktop. */
.comment-list ol.children {
margin-left: 1em;
}
.comment-list .avatar {
float: left;
}
.comment-list li li.has-avatar .comment-text {
margin-left: 3.75em;
overflow: hidden;
}

}

/* =Layout for bigger screens

---

*/

@media only screen and (min-width: 1224px) {

/* Layout width */
#menu-primary .wrap,
#menu-secondary .wrap,
#menu-secondary div.menu {
width: 1025px;
height: 33px;
margin: 0 auto;
}
#menu-primary div.menu {
min-width: 1024px; /* 1px border */
}
#main .wrap,
#header .wrap,
#sidebar-subsidiary .wrap,
#footer .wrap {
}

}

/* =Layout for huge screens

---

*/

@media only screen and (min-width: 1524px) {

/* Layout width */
#menu-primary .wrap,
#menu-secondary .wrap,
#menu-secondary div.menu {
width: 1226px;
}
#menu-primary div.menu {
width: 1224px; /* 1px border */
}
#main .wrap,
#header .wrap,
#sidebar-subsidiary .wrap,
#footer .wrap {
width: 1178px !important;
}

}

.lang-item {
position: relative;
left: 145px;
bottom: -47px;
z-index: 99;
}

these media queries might be causing the problem. Try removing them and see what happens

[frankman]

Thank you guys, you are the best!

I removed those media queries from the CSS + i had to remove a js file from the function.php file and it’s a lot better now. It’s far from perfect but it’s a progress and i’m really happy about it because this site gave me a headache since two days. I used Firebug to examine the CSS and i always missed those lines.

Right now the main div is the only one which still moves when i resize the browser window. That is the only thing i have to fix.

I can’t believe it. You saved my day. :) Cheers!

[Author]

Posts