1

I have made my website responsive. Checked on many different browsers and mobile phones. It works fine. But the problem is, when I check on latest mobile phones that have 720x1280 or better native display resolution (screen size 5 to 5.5-inch), my website's doesn't show up at right side, it rather goes below the contents of . Here's the CSS code:

 @media all and (min-width: 680px) {
.container {
 max-width: 1220px;
 text-align:left;
 background:#FFF;
 overflow:hidden;
 position:relative;
 box-shadow: 0px 2px 5px 0px #888888;
 margin: 0 auto;
 }
 section {
 float: left;
 width: 67.21311475%; 
 padding-left:1.63934426%;
 padding-right:1.63934426%;
 padding-top:15px;
 padding-bottom:15px;
 background:#FFF;
 position:relative;
 }
 aside {
 float: right;
 width: 26.22950819%;
 padding-left:1.63934426%;
 padding-right:1.63934426%;   
 padding-top:15px;
 padding-bottom:15px;
 background:#F9F9F9;
 position:relative;
 }
 }

I want Aside to be 320 pixels. So, in percentage 320/1220=27.27272727%. If I put 160px width ads then the ad will properly show as long as the min screen size is (160+20px padding)/680=26.47058823% (I hope I am correct till this point). But it doesn't work. I checked on iPhone 6S, Samsung E5, and the Aside doesn't show up in neither portrait or landscape mode. Aside goes as a block under everything else and above the footer section. I understand that's the whole point of responsiveness, but what I don't understand is this: E5's resolution is 720x1280 whereas iPhone 6s' resolution is 750x1334. So, why my media query is not working to accommodate the aside at its place?

Is responsive webdesign about screen resolution or screen size of the targeted devices? Or is it about placing one block after another no matter what the resolution of the device is? Please help me understand.

Umar Hussain
  • 3,461
  • 1
  • 16
  • 38
Sudin
  • 29
  • 1
  • 8
  • Missing words 'Aside section', – Sudin Sep 06 '17 at 06:17
  • Hi, to answer the part on website responsiveness, I think it is looking more on being about the screen size in terms of pixels. Someone correct me if I'm wrong, but 1 CSS pixel is not exactly one pixel on the screen, the dimensions of an iPhone6 is 375x667 for CSS purposes (use these values instead) – chngzm Sep 06 '17 at 06:29
  • Thank you, but would you please tell me about the unit for dimension? I mean 375x667 what? If it is not pixels then what is it? Also, where can I get such dimension information about different phones? – Sudin Sep 06 '17 at 06:39
  • Yeah it's pixels, I use Google Chrome's built in ones to find the iPhone6 one, you can try using Javascript to return the screen width and/or height if you want to test, I found a link for iPhones that might help https://stackoverflow.com/questions/25754848/what-are-the-device-width-css-viewport-sizes-of-the-iphone6-and-iphone-6-plus – chngzm Sep 06 '17 at 06:43
  • Thank you chngzm – Sudin Sep 06 '17 at 14:29

1 Answers1

3

From W3Schools

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen

The problem is that a pixel is CSS does not necessarily correspond to a physical pixel on the screen, for example, has 1334x750 pixels but only 667x375 for CSS purposes. The latter is the one that CSS considers, which could be leading to the error that you are facing as the wrong number of pixels are used to calculate.

Look for the CSS pixels instead of just regular pixels instead. Screen resolution matters but not the absolute number of pixels for responsive web development. Hope this helps :)

chngzm
  • 608
  • 4
  • 13
  • https://stackoverflow.com/help/someone-answers if you could accept my answer that would be great – chngzm Sep 06 '17 at 14:42
  • 1
    Yes, didn't know this. But I found a big list of CSS device-independent pixel count of the mobile phones here. Thank you for your answer and hints. The list might be helpful to many like me, so I am sharing it here: https://mydevice.io/devices/ – Sudin Sep 08 '17 at 06:20
  • 1
    Also, I believe, the answer to this question is already given here in detail https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio – Sudin Sep 08 '17 at 06:46