Search code examples
htmlalignmentmonitorwidescreen

Setting up my webpages on a widescreen monitor may have caused me to create inaccurate div positions

I recently put together a website exclusively using a computer with a wide screen monitor. Later, When opening the same pages online using a computer with a smaller sized monitor, I suddenly noticed that all the div positions are completely out of place. My question is how to use the widescreen monitor to continue to develop my webpages without messing up div positions for views on regular sized monitors?

Re replies:

Thanks for the advice guys. I agree that the design of the page should be flexible enough to accommodate most browser window sizes. However, when u are working with a widescreen monitor and not paying attention it is easy to overcompensate div placements and element sizes. My next question is on how to be sure of regular browser window dimensions and how to force my browser window into that size?

Thanks Cyrena for giving me directions with the development tools. I do use them and check across browsers. But My problem here was working exclusively on a widescreen monitor with the browser maximized. I don't want to make the same mistake, so I need to figure out how to resize my browser window with the right dimensions.

Solution

  • Two basic approaches off the top of my head:

    1. Resize your browser to be the width of your minumum supported desktop/browser size.
    2. Set desktop preferences to be different sizes (like profiles) and switch between them during testing phase.

    The truth is that a really good looking site will never work on all browser configurations. Choose a bar and work against that.