How does Website responsiveness work?

Question

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.

Answer 1

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 :)