1

I have looked at other resources on this topic and the the best result for me was <meta name="viewport" content="width=device-width, initial-scale=1.0">. I use a 1600 x 900 monitor and almost everything get's out of place when I go to a different monitor. Any suggestions on how to fix this? (Side note: All my div elements are placed using pixels.)

abracadabra
  • 11
  • 3
  • Depends on your layout and styles `` is far from being a fix all solution. `px` is definitely not a responsive unit. – zer00ne Feb 23 '19 at 06:17
  • I would use Grid layout. – Dohab Feb 23 '19 at 06:23
  • Have a look at my answer in this post https://stackoverflow.com/questions/54821843/change-height-to-fill-the-bottom-of-the-screen/54822644#54822644 – Alen.Toma Feb 23 '19 at 07:25

1 Answers1

0

Size Content to The Viewport

Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally!

So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.

Some additional rules to follow:

1. Do NOT use large fixed width elements - For example, if an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport.

2. Do NOT let the content rely on a particular viewport width to render well - Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.

3. Use CSS media queries to apply different styling for small and large screens - Setting large absolute CSS widths for page elements will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.

mohammad javad ahmadi
  • 2,031
  • 1
  • 10
  • 27
  • Thanks for the rules, but I don't see how I can edit my website to those rules. Could you please specify a bit more on rule 2 and 3 for me? – abracadabra Feb 23 '19 at 15:19
  • https://varvy.com/mobile/content-size-viewport.html. write this link and CSS media queries can be used to apply different styling for small and large screens. at the last of this link you can read about media queries for Responsive Web Design – mohammad javad ahmadi Feb 24 '19 at 05:23