SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mobile CSS text does not conform

    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

    Code:
    @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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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:

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •