Mobile CSS text does not conform

HTML & CSS
1

Hi all,

I’m testing out 1 page of a test site for responsiveness http://clients.clhdesigns.com/cga2/about.php

I’m not worried about images or nav right now but just getting it to show up right in an Iphone and have gone wrong somewhere here is the css code where I’m finding that my type is not all of the type. It gets cutoff

@media screen and (min-device-width : 320px)
and (max-device-width : 480px) {
	
#wrapper {
	width:100%;
	overflow:hidden;
}
#header h1 {
	width:auto;
	float:none;
	width:100%
}

#nav_wrapper{
	display:none;
}

#content {
	width:100%;
}
#leftcol {
	display:none;
}
#maincol, #maincol2 {
    float:none;
    width:auto;
}

Thanks for the help

2

Make sure to write your @media rules while you are writing your main CSS, rather than afterwards. At the moment, you have not overwritten this:

div#maincol, div#maincol2 {
overflow: hidden;
width: 730px;
}

So on small screens, the content area is set to a width of 730px, AND you’ve hidden overflow, meaning that the user can’t access anything that’s off screen.