Menu
I have designed a very simple 3 column layout and have a media query at the bottom of my .css file. That says when the browser is less that 500px, the left column dissapears. and the other columns fall into place.
However the two other columns hold their float and width values. The css in my media query will not override the original css.
My html;
[code=html]
<body>
<div id=”container”>
<h1 class=”title”>The Beauty of Responsive Design</h1>
<img src=”images/blog images/splash/29.jpg” class=”splash” />
<div class=”entry”>
<div class=”info”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ipsum tellus. Proin auctor ultricies adipiscing. Sed non facilisis tortor. Maecenas pharetra eros nec nisi lacinia eleifend. Morbi sodales lacinia lacinia.</p>
</div>
<div class=”main”>
<div class=”content”>
<h2>So with our design properly cordoned off</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ipsum tellus. Proin auctor ultricies adipiscing. Sed non facilisis tortor. Maecenas pharetra eros nec nisi lacinia eleifend. Morbi sodales lacinia lacinia. Vivamus libero elit, vestibulum et convallis vel, tincidunt quis nibh. Donec tristique laoreet libero pharetra interdum. Nam non mi id neque tempor rhoncus..</p>
<p>Duis at justo mi. Sed sapien mi, iaculis vitae porttitor iaculis, congue ut ipsum. Curabitur sit amet convallis neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget mattis neque. Duis vulputate erat in lacus tempor consectetur. Quisque vitae magna ac lorem mattis lobortis. Phasellus convallis odio justo, et suscipit nisi. </p>
</div>
<div class=”sidebar”>
<p>Proin ac est vitae justo malesuada dapibus quis non tortor. In blandit, quam sit amet cursus gravida, lectus velit vestibulum augue, non sagittis lorem magna nec augue. Maecenas rutrum mollis justo sed posuere. Morbi enim turpis, venenatis quis porttitor nec, gravida feugiat lectus. Vivamus consectetur tempor eros, ut gravida tortor sollicitudin sollicitudin. Sed sed sem nisl, quis dictum massa. Morbi purus nulla, tincidunt vel luctus ac, commodo sit amet ligula. Quisque in urna vitae dui tristique tempus a vitae urna. Sed ultricies augue id dolor feugiat non sodales elit sagittis. Cras sit amet ipsum in ipsum accumsan tempus. Pellentesque eget risus a augue sollicitudin accumsan. Curabitur ultricies lacinia lectus, vitae commodo felis molestie condimentum. Curabitur nibh enim, luctus et condimentum quis, lacinia ut massa. Donec id purus nunc, vitae scelerisque leo. Vivamus id sem viverra felis ultricies blandit tristique vitae nulla. Maecenas tempus faucibus arcu. </p>
</div>
</div><!– End of content–>
</div><!– End of entry–>
</div> <!– End of container–>
</body>
and then this is my css below:
[CODE]/* main styles
——————————————— */
@charset “UTF-8”;
body {
font: normal 100% Helvetica, Arial, sans-serif;
color: #005B9A;
}
h1 {
font-family: Georgia, serif;
font-size: 1.5em; /* 24px / 16px = 1.5em */
}
h2 {
font-family: Georgia, serif;
font-size: 1.25em; /* 24px / 16px = 1.5em */
}
#container {
margin: 40px auto;
padding: 0 1em;
max-width: 60em; /* 960px / 16px = 60em */
}
h1.title {
margin-left: 16.666666%;
width: 70.85% ;
font-weight: strong;
}
.splash {
width:100%
}
/* POST */
.entry .info {
float: left;
width: 8.333333333%;
}
.entry .main {
float: right;
width: 91.666666666%;
}
.entry .content {
float: left;
width: 70%;
}
.entry .sidebar {
float: right;
width: 30%;
}
/* Media Queries
——————————————— */
@media only screen and (max-width:500px) {
.info {
display:none;
}
h1
{
color:red;
}
.entry, .sidebar, .content
{
float:left;
width: auto;
}
.main { width:100%;}
}
[B][SIZE=”5″]Please help if you can!!! ???