Question

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 wrongly ?

Thank you.

The

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;
}
}

Sample Page

Answer 1

.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.