CODEWITHSUNDEEP
htmlcss
Infinixd
Infinixd

Reputation: 151

Detecting screen width for all Mobile Devices

When I simulate with Google Chrome inspector choosing the Galaxy S5 (360px), I am having problems detecting the proper screen width. It omits the CSS for the 360px and uses the 768px CSS instead. Is there a better way around this?

@media only screen and (max-device-width: 360px)  
{

    .header_2{width:100%;height:auto;padding:20px;}
    .left_obj{width:290px; position:relative;float:left;margin-bottom:20px;}
    .right_obj{width:290px; position:relative;float:left;}
    .mini_header{margin-bottom:20px;}

}


@media only screen and (max-device-width: 768px)  
{

    .header_2{width:100%;height:auto;padding:20px;}
    .left_obj{width:370px; position:relative;float:left;margin-bottom:20px;}
    .right_obj{width:370px; position:relative;float:left;}
    .mini_header{margin-bottom:20px;}

}

Upvotes: 0

Views: 121

Answers (2)

Mukesh Ram
Mukesh Ram

Reputation: 6328

Just change the order or reverse of your media query. Write first 768 media query then 360.

Upvotes: 3

bxorcloud
bxorcloud

Reputation: 689

you can add meta to your header.

<meta name="viewport" content="width=device-width">

you can also refer to this link for full details http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

Upvotes: 1

Related Questions