CODEWITHSUNDEEP
htmlcssresponsive-design
Kim Oliveros
Kim Oliveros

Reputation: 711

Responsive Web issue on mobile

Hi I'm trying to finish a site with a responsive issue on browsers on mobile my problem is on my css' media query the browser screen size doesnt fall on the media query that I have created. For example I have a media query for the screen of iphone 4 but it the browser doesn't read the style for that it instead reads the iphone 6 css style. here is how I did the media query

    /* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

  .if-wrap .if-table-wrap, .if-wrap .if-grid {width:70%;right: 25px;}
  .if-box2 {top: 98px !important;margin: 0 10px 0 99px !important;padding: 54% 54% 0 0 !important;}


}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

  .if-box2 {top: 166px !important;margin: 0 10px 0 165px !important;padding: 54% 54% 0 0 !important;}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
 .if-box2 {top: 166px !important;margin: 0 10px 0 165px !important;padding: 54% 54% 0 0 !important;}
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .if-box2 {top: 200px !important;margin: 0 10px 0 200px !important;padding: 56% 56% 0 0 !important;}

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .if-box2 {top: 100px !important;margin: 0 10px 0 100px !important;padding: 61% 61% 0 0 !important;}

}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .if-box2 {top: 200px !important;margin: 0 10px 0 200px !important;padding: 56% 56% 0 0 !important;}


}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

  .if-box2 {top: 118px !important;margin: 0 10px 0 118px !important;padding: 60% 60% 0 0 !important;}

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
   .if-box2 {top: 118px !important;margin: 0 10px 0 118px !important;padding: 60% 60% 0 0 !important;}


}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
  .if-box2 {top: 203px !important;margin: 0 10px 0 203px !important;padding: 53% 53% 0 0 !important;}

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
 .if-box2 {top: 240px !important;margin: 0 10px 0 240px !important;padding: 53% 53% 0 0 !important;}

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
   .if-box2 {top: 133px !important;margin: 0 10px 0 133px !important;padding: 60% 60% 0 0 !important;}


}

I believe that a browser should read it from top to bottom so the logic should be the iphone 4 should be read 1st before anything else.. or is this a false theory? also I'm using google chrome's developer tool to see the responsiveness of my pages is this tool accurate at all? because I tried viewing my site on my iphone 5s and the design seems to work while not on chrome..

Please help me solve this responsive issue on how can I make the viewport read the size for whichever screen is for that device... Thanks in advance I'm kinda new on this responsive thing also before anything else I also included this on my header part

<meta name="viewport" content="width=device-width,initial-scale=1">

Upvotes: 1

Views: 179

Answers (1)

donnywals
donnywals

Reputation: 7591

Instead of using things like min-device-width and max-device-width you probably want to just use min-width and max-width. That will use the viewport width instead of the device width which is far more likely to be what you need.

Also the pixel ratio media query will probably cause your layout to not be properly triggered on Chrome if you machine has a pixel ratio of 1. If there's no specific reason for you to target these pixel ratios you should probably remove them since they'll cause you more harm then good in this scenario.

Upvotes: 1

Related Questions