Resizing a div using CSS for mobile devices

Question

Is it possible to have a div resize for mobile devices using just CSS? If so could somebody please show me a working example so I can work out how to do it myself?

Thank you

Solution

You can use media query like below for particular device i.e phone, tab etc Following is just example

CSS

.cont {float:left;width :400px;background-color:#000;}
.cont .left {float:left;width :200px;}
.cont .right {float:left;width :200px;}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */

.cont {width :200px; background-color:#666666 !important;}
.cont .left {width :100px !important;}
.cont .right {width :100px !important;}

}

HTML

<div class="cont">
    <div class="left">
        left content
    </div>
    <div class="right">
        right content 
    </div> 
</div>

Otherwise you can set width of div in percentage instead of pixel i.e

.cont {float:left;width :100%;background-color:#000;}
.cont .left {float:left;width :50%;}
.cont .right {float:left;width :50%;}