Website Resolution Issues In Different Pc's

I have designed a website. When I opened the final website in different PCs which have different resolutions my webpage is not the same I designed. The contents are out of body pos

Solution 1:

This is an issue many developers are facing.

The problem is that my screen (or even your screen if you resize the window) will make the page look different, if you use px to control the position of all your divs.

I would suggest you learn a little about CSS and how to use it (including using units other than pixels).

It is handy to know when to use auto, %, px and other things that you need to know to make your webiste look the same across as many devices as possible.

W3 has a good Responsive Web Design - Introduction that you might want to check out.

Ultimately it teaches you what a responsive design is:

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 topics the introduction covers include:

• Intro

• Viewport

• Grid View

• Media Queries

• Images

• Videos

• Frameworks

Good luck! Hope your project goes well!

Solution 2:

Use px units so that it does'nt change the size of the image and add the following code to head tag before the body tag:

<metaname="viewport"content="width=device-width, initial-scale=1.0">