Design limitations of responsive websites

For last 3 months I have been fixing a website that looked fine with one resolution, but rendered incorrectly using slightly different resolution. These are the observations I noticed when fixing the layout.

1. Outermost block and inline-block elements must have explicit width, otherwise the width is calculated as maximum width of the inner elements including margins and padding
2. Scrollbars reduce usable viewport width by 8 pixels, so design the layout to use only available viewport height, or subtract 8 pixels from usable width if viewport height is less than required
3. When you test different resolutions, you can only test smaller than natural viewport width of your own display after browser zooming. When emulating desktop browsers, the specified width is after scaling, but when emulating mobile browsers, it is before scaling.

If rightmost element doesn't seem to fit in the remaining available space, count how many other elements are to the left of it and subtract that many pixels and see if that fixes the rendering. If it doesn't fix, try subtracting one pixel at a time and retry. It helps to have the widths in either CSS file or JavaScript function, so you don't need to reload the page and can just edit the relevant file in browser's DOM inspector or "Sources" tab of developer tool. Modern browsers will open developer tools with F12 key.

If you decide to use JavaScript function, you can bind the function to "resize" event of the window using:

var resizeTimeout = false;

function resizeLayout() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  ...
}

// window.resize event listener
window.addEventListener("resize", function() {
  if (resizeTimeout) {
    // clear the timeout
    clearTimeout(resizeTimeout);
  }
  // start timing for "completion"
  listTimeout = setTimeout(resizeLayout, 100);
});

document.addEventListener("DOMContentLoaded", resizeLayout);

Add your own resize logic to where ... is... 100 ms delay is so that when you resize the browser window, it doesn't immediately try to resize the layout causing browser to slow down and contents to flicker.

Part of the JavaScript code adapted from article posted at https://bencentra.com/code/2015/02/27/optimizing-window-resize.html