CODEWITHSUNDEEP
htmlcss
Sepp1
Sepp1

Reputation: 45

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

Basically I'm doing an assignment where it requires me to use HTML and CSS to create a website (they didn't teach us at all) and I ended up completely disregarding the screen size and the responsive aspect of the site, so whenever I go on a smaller screen like on a tablet, everything in the website completely distorts. How do I make it so my website readjusts automatically to fit all screen sizes and resolutions e.g. 1024x768 screen.

This is the CSS page:

body {
    margin: 0;
    background-color: #D2EBF9}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1D2E51;
    width: 100%;
    min-width: 1024px;
    position: absolute;
    top: 0;
}

li {
    float: left;
    border-right:1px solid #bbb;
}


li a {
    font-family: 'Roboto', sans-serif;
    display: block;
    color: #D2EBF9;
    padding: 18px 35px;
    text-decoration: none;
}

li a:hover {
    background-color: #0E527C;
}

li a:focus {
    background-color: #0E527C;
}

.active {
    background-color: #0E527C;
    text-decoration: underline;
}

.textboxes {
    width: 52.5%;
    height: 350px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 50px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxes2 {
    width: 52.5%;
    height: 550px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 50px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxes3 {
    width: 52.5%;
    height: 200px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 500px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxes4 {
    width: 52.5%;
    height: 700px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 500px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxes6 {
    width: 52.5%;
    height: 700px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxes7 {
    width: 52.5%;
    height: 400px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 50px;
    text-align: justify;
}

.textboxheading {
    padding: 17px 20px 16px;
    line-height: 17px;
    font-size: 10vw;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #e9eff4;
}


span.headings {
    font-family: 'Roboto', sans-serif;
    font-size: 110%;
    color: #D2EBF9;
}

.HTB {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 50px;
    margin-bottom: -50px;
    margin-top: 50px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 50px;
    margin-bottom: -50px;
    margin-top: 100px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop2 {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 50px;
    margin-bottom: -50px;
    margin-top: 220px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop3 {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 500px;
    margin-bottom: -50px;
    margin-top: 325px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop4 {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 500px;
    margin-bottom: -50px;
    margin-top: 100px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop5 {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 500px;
    margin-bottom: -50px;
    margin-top: 100px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.HTBtop6 {
    width:  52.5%;
    height: 35px;
    background-color:#1D2E51;
    margin-left: 0px;
    margin-bottom: -50px;
    margin-top: 100px;
    margin-right: 0px;
    border-bottom: 1px solid black;
}

.mainheading {
    text-align: center;
    font-size: 40px;
    color: #FFFFFF;
    display: center;
    font-family: 'Luckiest Guy', cursive;
}

p.maintext {
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 160%;
    color: black;
}

pre.maintext1 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 160%;
    color: black;
}

img.style {
    margin-left: 1150px;
    margin-bottom: 0px;
    margin-top: 100px;
    position: absolute;
    bottom: 500px;
    height: 350px;
    width: 580px;
    border-style: solid;
    max-width:100%;
}

img.style2 {
    margin-left: 1150px;
    width: 580px;
    height: 350px;
    margin-top: 100px;
    position: absolute;
    bottom: 60px;
    border-style: solid;
}

img.style3 {
    margin-left: 1150px;
    width: 580px;
    height: 250px;
    margin-top: 100px;
    position: absolute;
    bottom: 640px;
    border-style: solid;
}

img.style4 {
    margin-left: 1150px;
    width: 580px;
    height: 250px;
    margin-top: 100px;
    position: absolute;
    bottom: 320px;
    border-style: solid;
}

img.style5 {
    margin-left: 1150px;
    width: 580px;
    height: 250px;
    margin-top: 100px;
    position: absolute;
    bottom: 20px;
    border-style: solid;
}

img.style6 {
    width: 580px;
    height: 300px;
    margin-top: 100px;
    position: absolute;
    bottom: 180px;
    left: 70px;
    border-style: solid;
}

img.style7 {
    width: 580px;
    height: 300px;
    margin-top: 100px;
    position: absolute;
    bottom: 180px;
    left: 670px;
    border-style: solid;
}

img.style8 {
    width: 580px;
    height: 300px;
    margin-top: 100px;
    position: absolute;
    bottom: 180px;
    left: 1270px;
    border-style: solid;
}

Upvotes: 1

Views: 322

Answers (1)

vimuth
vimuth

Reputation: 5612

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.

Upvotes: 1

Related Questions