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

Answer 1

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%;}