tl;dr : I need advice how to use all the whitespace on a high resolution device, in a way that the design is still pretty and doesn’t mess up [=kill functionality on] smaller resolutions.
I want to make some sort of an online magazine, which is going to be a pleasure to read, but I cannot find a good form that fits all devices and is pretty at the same time. I want users to be able to select different topics through the menu and scroll down or up to read the content. I thought I could use percentage widths on div’s and sections, but displaying that on an iPad or Macbook with a lower resolution than my 27" monitor messes up the design.
The process started with a horizontal scroll, which is tricky to do right on multiple devices. Afterwards, I’ve made a navbar on the side, which is a pain scaling when looking in landscape mode on iPad, or on a smaller resolution. Now I’ve got this with a dropdown menu with interactions on the button.
And it works perfect on Ipad and Macbook, but on my screen there’s almost twice the whitespace as there is content. Is there a way to use divs or sections in a way that I can use the whitespace, and avoid using containers too much (because they force content into the 1024px width)?
Any suggestion is welcome. Thanks in advance!
[by the way, text and content is just for dummy purposes, not styled yet]