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

I was wondering if anyone can help with a problem, I'm having trying to get my website to fit multiple screens sizes? I been doing some research and trying different methods (like "adjust-your-website-to-fit-all-resolutions" and "html-css-to-fit-all-screen-resolution") and also been trying different CSS codes and Javascript codes with no success. I even try different Responsive website codes like <meta name="viewport" content="width=device-width"> in the html code and @media screen and (min-width: 700px) in my main css file and none of it work. I just don't know why it not working.

The other thing I'm wondering is, could it be my existing html and css code. You see for my different images, headers, content and etc, I been using position:absolute; and I'm wondering if that affecting my fitting all screen sizes as well. Also another thing I was wondering that maybe could be causing my problem, is the way I design my site based on the screen of my computer at the time. You see when I first design the site I was using a computer with 1366 x 768 (resolution screen size) and when I first noticed the problem with my site, I was using a computer with 1600 x 900 (resolution screen size). An wondering if the position:absolute; could be hurting my website ability to adjust to different screen sizes.

Can anyone suggest or recommend any way using CSS, HTML and/or Javascript to make my website adjust to bigger or different sizes?

Thank you in advance!

P.S. - Here some examples of code from my website:

Code @media screen and (min-width: 1600px) // computer sizes 1600 x900 from my CSS file:

 #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: 1600px) {
   #wel {
       position:absolute;
       top: 108px;
       left: 400px;
   }
}

code I put in my html to make the responsive code work:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Anyone have any suggestions?

Solution

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.