How to Make My Website Fit Any Screen Size

How to make my website fit on all screen resolutions

This is called responsive design and is exactly what Twitter Bootstrap was invented for.

I do not usually reference W3Schools, but their bootstap tutorial is worth doing.

The basis of Bootstrap is their grid system. Learn that (about 1 hr for tutorial and one hour for experimentation), and you will have solved most of your responsive design issues.

Then, you should experiment with css @media queries. Bootstrap uses them, and so should you (for fine-tuning results on different sized displays).

To get started with Bootstrap, all you need is to include the appropriate libraries into the head part of your web pages. Since Bootstrap is built on jQuery, you must also include the jQuery library. So, the <head> section of your web pages should look something like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Your Domain</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="your site description goes here" />
    <meta name="keywords" content="search, keywords, go, here" />
    <meta name="robots" content="index,follow" />

    <link rel="icon" type="image/png" href="img/your_favicon.png?v=1" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

How do I make my website change size for different screen sizes?

Please go with RWD (Responsive Web Design) approach using CSS3 media queries.

Media query:
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Syntax
@media (min-width: 700px) { ... }

Reference :
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Responsive frameworks :

There are some frameworks that can be used for creating RWD.

Twitter Bootstrap http://getbootstrap.com/2.3.2/
Foundation http://foundation.zurb.com/
Skeleton http://getskeleton.com/

How do I make this web page fit any screen size or different dimensions?

For that purpose we can use media queries. For example this code runs only On screens that are 992px or less

@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

This will work for 1024x768 screen you mentioned

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    body {
      background-color:#ccc;
    }
}

You can check more on this link. And check on bootstrap too. That is a really nice and easy to use library for Build responsive, mobile-first projects.

How to set my website to fit into bigger and smaller screen sizes?

because you have defined two different min-width media query for the same div id(#wel) so it is not working, please try this & update as per your requirements.

#wel {
    position:absolute;
    top: 108px;
    left: 278px;
}
@media screen and (min-width: 700px) {
   #wel {
       position:absolute;
       top: 108px;
       left: 250px;
   }
}
@media screen and (min-width:701px) and (max-width: 1600px) {
   #wel {
       position:absolute;
       top: 108px;
       left: 400px;
   }
}

here in the example, till width 700px it will call 1st media query that is defined as (min-width:700px) and from701-1600 it will call the media query that is defined as from 701-1600.

make a site to fit any screen size?

Responsive design is the topic you should research. A List Apart has a great collection of articles pertaining to just this topic. I recommend you read the following articles in the following order:

Fluid Grids
Responsive Web Design
Fluid Images

These three will get you well on your way to designing responsively. In addition, don't forget the viewport meta tag that php NoOb suggested. It makes a real difference when you're on a physical device (some emulators seem to ignore it). Additional information on this particular tag can be found at the links below:

Using the viewport meta tag to control layout on mobile browsers - Mobile | MDN
Quick Tip: Don’t Forget the Viewport Meta Tag | Webdesigntuts+