Having rouble with responsive website

K

kosta

New Member
I am relatively new to responsive web site design and put together a page using a fluid grid layout in Dreamweaver cs6 , my problem is that in regular size I have the nav menu next to the header and when brought down in size to the mobile display size , the nav moves into the header, I would like it to move beneath the header in the mobile view.

Any ideas on how to easily fix this?
 
chrishirst

chrishirst

Well-Known Member
Staff member
Reorganise the document flow and stacking orders so the elements collapse in the way you would prefer.
 
ronaldroe

ronaldroe

Super Moderator
Staff member
You're using absolute positioning, I assume? To fix the problem, switch to floats. Or, just set a media query at the pixel width where they run together and change the positioning to relative.
 
K

kosta

New Member
here is the code, what I would like to do is have the nav fall underneath the header when moving the display size down to a mobile screen.
I am currently moving all the css into an external stylesheet, please let me know if you need to see all the css code to tell me what I would need to add.

Thanks for any help.

HTML: 
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>James Barker Photography</title>
<link href="../../css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="../../css/Barkercss.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mainContent img {
    padding-left: 10px;
    padding-bottom: 10px;
}
body,td,th {
    color: #333;
    font-size: 18px;
}
a:link {
    color: #999;
    text-decoration: none;
}
a:visited {
    color: #CCCCCC;
    text-decoration: none;
}
#header p {
    padding-top: 10px;
    padding-right: 120px;
}
a {
    font-size: 18px;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: none;
    font-weight: bold;
}
h2 {
    font-size: 18px;
}
h3 {
    font-size: 18px;
}
</style>
<!-- 
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build 
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="../../css/respond.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="gridContainer clearfix">
  <div id="header"><div id="nav"><p>Home | <a href="jamesbarkerphotography_about.html"><strong>About</strong></a> | <a href="jamesbarkerphotography_contact.html"><strong>Contact</strong></a></p></div></div>
  <div id="mainContent"> <img src="../../images/James Barker/ID-1001019.jpg" width="400" height="262" /><img src="../../images/James Barker/ID-1001023.jpg" width="400" height="266" /><img src="../../images/James Barker/ID-1001026.jpg" width="400" height="266" /><img src="../../images/James Barker/ID-100521.jpg"><img src="../../images/James Barker/ID-100519.jpg" width="400" height="266" /><img src="../../images/James Barker/ID-100513.jpg"><img src="../../images/James Barker/ID-1006628.jpg"><img src="../../images/James Barker/ID-100133460.jpg"><img src="../../images/James Barker/ID-100564.jpg"><img src="../../images/James Barker/ID-100133459.jpg" width="400" height="266" ><img src="../../images/James Barker/ID-100351.jpg" width="400" height="266" ><img src="../../images/James Barker/ID-100128.jpg" width="400" height="266" ><img src="../../images/James Barker/ID-100562.jpg"><img src="../../images/James Barker/ID-100621.jpg"><img src="../../images/James Barker/ID-1001054.jpg"><img src="../../images/James Barker/ID-100119.jpg" width="340" height="400"><img src="../../images/James Barker/ID-1001176.jpg"><img src="../../images/James Barker/ID-1001031.jpg"><img src="../../images/James Barker/ID-1001232.jpg" width="320" height="400" ></div>
  <div id="footer">
    <p>Copyright 2013 James Barker All rights reserved. Photos can be purchased at <a href="http://www.freedigitalphotos.net" target="_blank"><strong>www.freedigitalphotos.net</strong></a> </p></div>
</div>
</body>
</html>
 
Last edited by a moderator:
You must log in or register to reply here.
Top