SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question make right column go under on small screens

    Using this basic 2 column layout, where the left one is fluid and the right is fixed, can someone please help me grasp how I can make the right column go under the left one when the screen width is reduced beyond a point, such as on small tablets and phones, using CSS? The main thing I want to keep from what I have is that when they are next to eachother, that the columns have an equal height, which in this case is achieved with display:table-cell.

    HTML Code:
    <style type="text/css">
    #box {
    display:table; 
    width:80%;
    margin:0 auto;
    }
    .column {
    display:table-cell;
    background:#ccc;
    padding:0 20px;
    }
    .two {
    background:#999;
    width:20em;
    }
    </style> 
    <h1>Testing column/grids</h1>
    <div id="box">
        <div class="column">
    		Main column
    	</div>
        <div class="column two">side bar</div>
    </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Here's a basic example of how you can do it:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>reflow</title>
    <style type="text/css">
    @media only screen and (min-width: 700px) {
    	#box {
    	display:table; 
    	width:80%;
    	margin:0 auto;
    	}
    	.column {
    	display:table-cell;
    	background:#ccc;
    	padding:0 20px;
    	}
    	.two {
    	background:#999;
    	width:20em;
    	}
    }
    
    @media only screen and (max-width: 700px) {
            #box { 
    	width:80%;
    	margin:0 auto;
    	}
    	.column {
    	width: 100%;
    	}
    }
    </style> 
    <meta name="viewport" content="width=device-width">
    </head>
    <body>
    
    <h1>Testing column/grids</h1>
    <div id="box">
        <div class="column">
    		Main column
    	</div>
        <div class="column two">side bar</div>
    </div>
    </body>
    </html>
    If you want a fallback for older browsers (IE8 and under), this is better:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>reflow</title>
    <style type="text/css">
            #box { 
    	width:80%;
    	margin:0 auto;
    	}
    	.column {
    	width: 100%;
    	}
    
    @media only screen and (min-width: 700px) {
    	#box {
    	display:table; 
    	width:80%;
    	margin:0 auto;
    	}
    	.column {
    	display:table-cell;
    	background:#ccc;
    	padding:0 20px;
    	}
    	.two {
    	background:#999;
    	width:20em;
    	}
    }
    
    
    </style> 
    <meta name="viewport" content="width=device-width">
    </head>
    <body>
    
    <h1>Testing column/grids</h1>
    <div id="box">
        <div class="column">
    		Main column
    	</div>
        <div class="column two">side bar</div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'm figuring out how to use @media now.

  4. #4
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For now I have been using a single stylesheet, and at the end of it I have
    Code:
    @media only screen and (max-width: 700px)
    and then do things like resetting paddings and format for mobile and small screens (usually going to a single column). Is there a way to use @import or something so that a desktop user with more than 700px screen width doesn't need to download the "mobile" code? I tried using
    Code:
    @import url(mobile.css) (max-width:700px);
    where mobile.css contains what was previously under the @media query, but my phone (opera mobile on HTC) isn't downloading it (but my desktop does when I make the window thin enough)

    EDIT:actually it doesn't work on my desktop either

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Instead of having everything in one style sheet, you can link to separate style sheets in the head of your document like so:

    Code:
    <link type="text/css" rel="stylesheet" href="main.css" media="screen,projection,tv">
    
    <link type="text/css" rel="stylesheet" href="mobile.css" media="screen and (max-width:700px)">


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
  •