Guys - probably a bit of a noob question but it's getting close to me ripping out my hair!!!
am setting a responsive site, with vertical nav on left hand side and content displayed to right. all shrinks down nicely until I want it to go full width at small screen sizes.
What i'm getting is both divs filling the window at 100% but the main content is sitting behind the navigation… which kinda defeats the object of it being there!!!
Have tried as many things as i can think of with floating / clearing / positioning / et al but nothing is working …
Can anyone please put me out of my mystery by telling me the stupid but simple thing i've missed.
Thanx.
Code:/* ---- FRAMEWORK ---- */ html { overflow-y: scroll;} body { font-family: helvetica, sans-serif; color: #82c717; background-color:#222; background-image: url(http://fusionperformingarts.co.uk/wordpress/wp-content/uploads/2013/01/Fusion-RepeatBg.jpg); background-repeat: repeat;} #wrap { background-color: #f3c;/*#222;*/ min-height: 940px; height: auto !important; height: 940px; /*-moz-box-shadow: 0px 6px 6px 6px #111; -webkit-box-shadow: 0px 6px 6px 6px #111; box-shadow: 0px 0px 6px 6px #111;*/} #sidebar-primary { float: left; position: absolute; background-color: #000; border-left: solid 3px #82b717; border-right: solid 3px #81b717; border-bottom: solid 3px #81b717; /*min-height: 700px; height: auto !important; height: 700px;*/ /*-moz-box-shadow: 0px 6px 6px 6px #111; -webkit-box-shadow: 0px 6px 6px 6px #111; box-shadow: 0px 0px 6px 6px #111;*/} #sidebar-primary ul li a { color: #82c717; text-decoration: none;} #sidebar-primary ul li a:hover { color: #fff; } #main { float: right; } #page { width: 100%; margin: 0px; padding: 0px; float: left; } #content { font-size: 14px; border: 3px solid #82c717; /*-moz-box-shadow: 0px 6px 6px 6px #111; -webkit-box-shadow: 0px 6px 6px 6px #111; box-shadow: 0px 0px 6px 6px #111;*/} #sidebar-secondary { float: left; background-color: #222; border-top: 3px solid #82c717; /*-moz-box-shadow: 0px 6px 6px 6px #111; -webkit-box-shadow: 0px 6px 6px 6px #111; box-shadow: 0px 0px 6px 6px #111;*/} #single { border: 3px solid #82c717; /*-moz-box-shadow: 0px 6px 6px 6px #111; -webkit-box-shadow: 0px 6px 6px 6px #111; box-shadow: 0px 0px 6px 6px #111;*/} #footer { width: 100%; float: left; clear: both; margin: 30px 0 0 200px; padding: 30px 20px; border-top: 1px solid #82c717;} /* ---- Responsiveness ---- */ /* - FULL SIZE - */ #wrap { max-width: 1024px; width: auto !important; width: 1024px; margin: -18px auto 40px auto; padding: 0px;} #sidebar-primary { width: 180px; margin: 0px 10px 60px 10px; padding: 0px; } #sidebar-primary .logo a img{ width: 100%;} #sidebar-primary ul { margin: 10px 0px;} #sidebar-primary ul li { margin: 5px 0px;} #sidebar-primary ul li a { display: block; margin: 10px 10px; font-size: 14px;} #sidebar-primary ul h3 { display: block; margin: 5px -3px; padding: 5px 10px; font-size: 14px; font-weight: bold; color: #000; background-color: #82c717;} #sidebar-primary ul .textwidget { display: block; float: left; clear: both; margin: 0 5px 20px 10px; font-size: 9px; height: auto; } #main { background-color:#06F; float: left; width: 77%; margin: 140px 0px 0px 210px; font-size: 14px; } #content, #single { width: auto; margin: 0px; padding: 15px; } #sidebar-secondary { width: 77%; margin: 10px 0px 0px 210px; } #sidebar-secondary ul li { display: inline-block; float: left; margin: 15px 15px 10px 5px;} @media screen and (max-width: 960px) { #wrap { width: 95%; margin: -18px auto 40px auto;} #sidebar-primary { width: 160px;} #sidebar-primary ul li a {} #sidebar-primary h3 {} #main { width: 77%; margin: 128px 0 0 180px; font-size: 14px;} #content, #single { width: auto; margin: 0px; padding: 15px; } #sidebar-secondary { width: 77%; margin: 10px 0px 0px 180px;} } @media screen and (max-width: 750px) { #wrap { } #sidebar-primary { width: 140px;} #main { width: 75%; margin: 112px 0 0 160px; font-size: 12px;} #content, #single { width: auto; margin: 0px; padding: 15px; } #sidebar-secondary { width: 75%; margin: 10px 0px 0px 160px; } } @media screen and (max-width: 600px) { #wrap { } #sidebar-primary .logo a img { width: 120px;} #sidebar-primary { width: 100%; float: left; margin: 0 0 10px 0; /*height: auto;*/ dispaly: block; border: none; } #sidebar-primary ul { } #sidebar-primary ul li { } #sidebar-primary ul li a { display: inline-block; float: left; margin: 0 auto; padding: 10px 20px; } #sidebar-primary ul li #socialmedia-container { float: left; margin: -10px 10px 0 0; } #sidebar-primary ul h3 { display: block; width: 96%; float: left; clear: both; text-align: center; margin: 5px 0 5px 0; } #sidebar-primary ul .textwidget { display: block; width: 100%; float: left; clear: both; margin: 0px 0px 0px 0px; font-size: 9px; text-align: center; } #main { width: 100%; display: block; float: left; clear: both !important; margin: 10px 0 10px 0px; padding: 0; } #content, #single { width: auto; margin: 0px; padding: 15px; } #sidebar-secondary { display: block; float: left; clear: both; width: 99%; margin: 10px auto; } }
Reply With Quote
Bookmarks