SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    336
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Broken divs in iPad and Kindle

    I am having trouble, hours of editing and re-trying, to display the left and right column inline when the browser deice size is 768 or 800 (iPad and kindles)

    the right column div just stays below everything and to the right.

    ALL sizes below 650 width are OK, just from 678 to 800 do not display correctly.

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    /* =Responsive (Mobile) Design
    -------------------------------------------------------------- */
    @media screen and (max-width: 980px) {
    
        body {}
    	
        .grid, 
    	.grid-right {
    	    float: none;
        }
    	
    	#featured-image {
    	    margin: 20px 0 0 0;
        }
    	
    	.home #widgets {
    		margin-top: 10px; /* was 40 */
    	}
        
        .top-widget,
        .home .top-widget {
            margin-top: 0 !important;
        }
        
        .hide-980 {
            display: none;
        }
        
        .show-980 {
            display: block;
        }
        
    }
    
    @media (max-width: 801px) {
    
        body {}
    	
        .grid, 
    	.grid-right {
    	    float: none;
        }
    	
    	#featured-image .fluid-width-video-wrapper {
    	    margin: 20px 0 0 0;
        }
        #content .grid .col-620 {
    	width:63%;	
    	}
    	#content .grid .col-300 {
    	width:31%;	
    	}
    	
    	#widgets fieldset {width:31%;}
    }
    
    
    @media (max-width: 769px)  {
    
        body {}
       
        #logo {
    	    float: none;
            margin: 0;
    	    text-align: center;
        }
    	
    	.logo {
    	    float: left;
            margin: 0;
    	    text-align: center;
    		width:300px;
        }
    	
    
        .grid, 
    	.grid-right {
    	    float: none;
        }
        
        .top-widget .widget-title {
            text-align: center;
        }
    	
        .js .menu,
    	.js .sub-header-menu {
    		display: none;
    	}
    	
    	.top-menu, 
    	.footer-menu li {
    	    float: none;
            font-size: 11px;
    	    text-align: center;
        }
    	
    	.tinynav {
            display: block;
        }
        
        .sb-holder {
            display: block;
        }
        
        #author-meta {
            padding: 20px;
        }
        
        .hide-650 {
            display: none;
        }
        
        .show-650 {
            display: block;
        }
        
        #footer {
    	    text-align: center;
        }
    
        #footer .social-icons {
            padding-bottom: 10px;
    	    text-align: center;
        }
    	
    	.searchform1 {visibility:hidden;}
    	
    	
    	#content .grid .col-620 {
    	width:63%;	display:inline;max-width:475px;
    	}
    	
    	#content .grid .col-300 {
    	width:33%; display:inline;
    	}
    	
    	#widgets fieldset {width:29%; display:inline;}
    		
    	
    	
    }
    
    
    @media (max-width: 650px) {
    
        body {}
    
    	
    
        .grid, 
    	.grid-right {
    	    float: none;
        }
    
        
        .top-widget {
            float: none;
            margin: 0 auto 10px auto;
            position: relative;
            text-align: center;
            width: auto;
        }
        
        .top-widget .widget-title {
            text-align: center;
        }
    	
        .js .menu,
    	.js .sub-header-menu {
    		display: none;
    	}
    	
    	.top-menu, 
    	.footer-menu li {
    	    float: none;
            font-size: 11px;
    	    text-align: center;
        }
    	
    	.tinynav {
            display: block;
        }
        
        .sb-holder {
            display: block;
        }
        
        #author-meta {
            padding: 20px;
        }
        
        .hide-650 {
            display: none;
        }
        
        .show-650 {
            display: block;
        }
        
        #footer {
    	    text-align: center;
        }
    
        #footer .social-icons {
            padding-bottom: 10px;
    	    text-align: center;
        }
    	
    	#widgets {display:none;}
    	
    }
    
    @media screen and (max-width: 480px) {
    
        body {}
    
    
        .grid, 
    	.grid-right {
    	    float: none;
        }
    	
    	
        .menu ul, 
    	.menu li, 
    	.top-menu, 
    	.footer-menu li, 
    	.sub-header-menu li {
    	    float: none;
    	    text-align: center;
            text-rendering: optimizeSpeed;
        }
    	
        .hide-480 {
            display: none;
        }
        
        .show-480 {
            display: block;
        }
        
        #footer {
    	    text-align: center;
        }
    
        #footer .social-icons {
    	    text-align: center;
        }
    
    	
    	#widgets {display:none;}
    }
    
    @media screen and (max-width: 360px) {
        
        body {}
    	
    
        .call-to-action a.button {
    	    font-size: 14px;
    	    padding: 5px 17px;/* 7px 17px */
    		margin-left:25px;
        }
    	
    	#featured {
    		height:auto;
    		padding:10px;		
    		
    	}
    
        .hide-320 {
            display: none;
        }
        
        .show-320 {
            display: block;
        }
    	
    	
    	#widgets {display:none;}
    }
    
    @media screen and (max-width: 240px) {
        
        body {}
    	
    	
        .call-to-action a.button {
    	    font-size: 14px;
    	    padding: 5px 10px; /*was 15*/
        }
        
            
        .hide-240 {
            display: none;
        }
        
        .show-240 {
            display: block;
        }
    	
    
    	
    	#widgets {display:none;}
    	
    }
    
    @media screen and (min-width: 0px) and (max-width: 400px) {
      #bphone { display: block; font-weight:bold; text-align:center; }  /* show it on small screens */
    }
    
    @media screen and (min-width: 401px) and (max-width: 9999px) {
      #bphone { display: none; }   /* hide for all below 401px*/
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    We need a live link to help with this, or at least a working demo that we can test. (CSS on its own has no context.) Please read this thread before posing code, though: http://www.sitepoint.com/forums/show...Posting-Basics


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
  •