2

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

user3074956
  • 109
  • 2
  • 5
  • 15
  • And font resizing too, thanks – user3074956 Dec 09 '13 at 13:08
  • Yes, it is. But how do you want to resize them? *From* what *to* what? Without specifics all I can really do is point you to [CSS Media Queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries). – David Thomas Dec 09 '13 at 13:12
  • Oh sorry David, it's basically a div I have fixed at the top of my website so as you scroll down it stays there, ithas text inside it, so it will be with a max width of 650px for iOS, from I guess a max width of 1024px – user3074956 Dec 09 '13 at 13:25

1 Answers1

4

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%;}
Divya Bhaloidiya
  • 5,018
  • 2
  • 25
  • 45