I have a website that I am trying to make responsive. When I apply @media only screen and (min-width: 180px) and (max-width: 267px), the content area is cut off on the right hand side. Below is the CSS I'm applying to the page.
Please what am I doing wrong?
Thank you.
CSS
.content_body{
margin: 0 auto;
width: 100%;
overflow: hidden;
padding-top: 30px;
background: #C9C7BB;
color: #555;
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
min-height: 200px;
}
.bio_wrapper{
line-height: 25px;
padding: 20px 0px 500px 50px;
}
.bio_left{
width: 800px;
float: left;
font-family: lato;
color: black;
}
.bio_images{
margin: 0;
margin-top: 30px;
margin-bottom: 90px;
}
.bio_images li{
padding-right: 35px;
display: inline;
list-style-type: none;
}
.bio_images li:last{
padding-right: none;
}
.bio_images img{
border: 4px solid #999966;
border-radius: 5px;
}
.bio_mainimage{
float:right;
width: 20%;
}
@media only screen and (min-width: 180px) and (max-width: 267px) {
.bio_mainimage{
display: none;
}
.content_body{
margin: 0 auto;
width: 50%;
overflow: hidden;
padding-top: 30px;
background: #C9C7BB;
color: #555;
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
min-height: 200px;
}
.bio_images img{
display: block;
}
}
.bio_left has an absolute width of 800px. Because .content_body has overflow set to hidden and its width is 100%, the content gets clipped off.
The bios.png image that appears at the bottom of the page would be better suited as a background image. It isn't presenting any content and just looks odd on a narrow device (and no, giving it display: none to hide it from narrow devices is not a good way to "remove" it).
This layout really would benefit from being styled for narrow devices first, then stash all of your floats, absolute widths, and odd margins within a media query that checks for wider devices.
Also, media queries don't need both a min-width and a max-width. You can just specify the max-width. I don't imagine there are any devices out there that are less than 180px wide.
