Attempting to fix CSS-based layout problems with website - css

Question

I've been working on the following website for my university: http://www.ecu.edu/english/tpc and have developed the layout that you currently see upon visiting it. It looks ok across browsers on the desktop, but I'm having trouble getting it to be flexible with smaller screens (such as an iPhone). I've attempted to adjust the max-width settings in a few places and I've had no luck. The specific issues are that the two horizontal menus at the top (in the HTML/CSS they are navigation and navigation2) and the content on the right (which are DTs contained in the sidebar div) seems to have fixed sizes which thus break the layout on smaller screens. Any suggestions are greatly appreciated, and the full CSS can be found here: http://jsfiddle.net/dSPdB/
/* -------- Horizontal Navigation -------- */
#navigation {
float: left;
margin: .5em 0 0 0;
position: relative;
padding: .5em 0;
text-transform: uppercase;
background-color: #592a8a;
}
#navigation ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
#navigation li {
font-family: 'Noto Sans', sans-serif;
display: inline;
list-style: none;
display: block;
float: left;
width: 11em;
max-height: 2em;
text-align: center;
padding: .5em 0 0 0;
}
#navigation li:first-child {
border-left: 0;
}
#navigation li:last-child {
border-right: 0;
}
#navigation li a {
color: #fff;
text-decoration: none;
}
#navigation li a:hover {
color: #fff;
border: 0;
text-decoration: underline;
}
/* --------------------------------------- */
/* -------- Navigation 2 -------- */
#navigation2 {
float: left;
margin: 0 0 0 0;
position: relative;
padding-left: 5.4em;
text-transform: uppercase;
}
#navigation2 ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
#navigation2 li {
font-weight: bold;
display: inline;
list-style: none;
display: block;
float: left;
max-width: 3em;
max-height: 2em;
text-align: center;
padding: .5em 0 0 0;
margin-right: 1em;
}
#navigation2 li:first-child {
border-left: 0;
}
#navigation2 li:last-child {
margin-right: 0;
}
#navigation2 li a {
color: #fff;
text-decoration: none;
}
#navigation2 li a:hover {
color: #fff;
border: 0;
text-decoration: underline;
}
/* --------------------------------------- */
Never mind regarding the media query not working, I didn't place it at the bottom of the CSS (duh!)

Answer 1

I would recommend you look into media queries.
Media queries are not all that difficult to use. You still have your regular CSS and on the bottom, you add:
#media only screen and (max-device-width: 480px) {
...
}
Inside the curly braces, you specify only the changes you want IF the screen is narrower than 480px.
#media only screen and (max-device-width: 480px) {
p {
color: red;
}
}
This would change all paragraph text to red, as soon as you make your browser window narrower than 480px. Of course, this is a little silly example. Most of the time you are more concerned about width or display of certain elements.
In your case, you probably want to target the navigation divs in those cases and have them behave differently, i.e.:
#media only screen and (max-device-width: 480px) {
#navigation2 {
float: none;
clear: both;
}
}
Note, the above is probably not what you want. I just did some dummy changes to show what is possible.