How do I make this website fit all screen sizes?

Question

I'm having trouble with screen sizes. I'm using Bootstrap for a lot of it.

Here are images:

Sass source: `

 body background: $main-background margin: 0 width: 100% height: 100% .footer position: absolute color: white font-family: Arial width: 100% height: 100% background-color: $plok-orange background-repeat: no-repeat background-size: 100% background-position: 50% 50% @media screen and (max-width: 1170px) min-width: 960px .footer width: 960px .footer-left margin-top: $margin-top-footer float: left margin-left: 20px .footer-left h1 color: $plok-black font-size: 30px font-family: Helvetica font-weight: lighter .footer-right margin-top: $margin-negative-footer float: right margin-left: 200px .footer-right h1 color: $plok-black font-size: 30px font-family: $font-stack font-weight: lighter 

html source:

 <div class="jumbotron"> <h1 class="display-4">..........</h1> <p class="lead">........</p> <hr class="my-4"> <p>..........</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div> <div class="footer"> <div class="footer-left"> <h1>Preview</h1> <div class="row"> <div class="col-md-2"> <img src="images/plokster-art-1.jpg" alt="..." class="img-thumbnail"> </div> <div class="col-md-2"> <img src="images/plokster-art-2.jpg" alt="..." class="img-thumbnail"> </div> <div class="col-md-2"> <img src="images/plokster-art-3.jpg" alt="..." class="img-thumbnail"> </div> <div class="footer-right"> <h1>Contact</h1> </div> </form> </div> </div> </div> 

I realize I'm not testing with the same max-width/min-width, but either way on my original screen size still does not fit. I'm using sass. `

Answer 1

You need styling on your root element jumbotron

I am not quite sure what you are trying to achieve. But here is my take.

Since your footer is position: absolute i would consider a relative parent. Try this on your root class

.jumbotron {
  position: relative;
  width: 100%;
}

maybe consider using the position absolute on the footer for its position

.footer {
  left: 0; bottom: 0; right: 0;
}

Remember that percentage based dimensions, such as width: 100% is based upon the parent element. 100% of parent is equal the dimension of the parent. Seems like you haven't styled your root element