Whitespace Driving Me Nuts!

Bootstrap Studio Help
1

Screen Shot 2022-02-16 at 6.37.57 AM
Screen Shot 2022-02-16 at 6.37.57 AM728×2080 66.6 KB

Hello everyone. My first time on the forum. I am having trouble figuring out how in BSS to remove all the extra whitespace at the bottom of this page. It happens on mobile. Below is the css that I use:

@media (max-width: 576px) {
  #main-frame {
    background: url("front-pic-logo.png") top no-repeat;
    background-size: contain;
    height: 100vh;
    margin: 0px;
    padding: 0px;
  }
}

@media (min-width: 577px) {
  #main-frame {
    background: url("front-pic-logo.png") top no-repeat;
    background-size: cover;
    height: 100vh;
    margin: 0px;
    padding: 0px;
  }
}

@media (max-width:  576px) {
  #main-frame {
    margin-bottom: 0px;
    width: 100%;
    height: 800px;
  }
}

@media (min-width: 800px) {
  #main-footer {
    position: relative;
    width: 100%;
    left: 0;
  }
}

@media (max-width: 767px) {
  #main-footer {
    margin-top: 500px;
  }
}

@media (max-width: 576px) {
  #main-footer {
    position: relative;
    margin-top: 450px;
    padding: 0px;
  }
}

@media (max-width: 375px) {
  #main-footer {
    margin-top: -465px;
  }
}

Any help would be appreciated and thanks in advance.

2

Part of your issue could be that you’re trying to use both MIN and MAX widths for things. MIN width is the correct one to use. Try adjusting those so you’re doing mobile first and only use one of them, they aren’t really meant to be combined unless you have some special circumstances which are pretty rare.

3

Hi,
You have #main-frame height set to100vh but further down the cascade you have #main-frame height set to 800px. 800px will win out here so removing this should fix your issue.

4

I will give these ideas a try. Thanks to you all. I have been a desktop developer for over 35 years and wanted to learn web programming and UI. Found BSS. Love it. The learning is fun for sure.

5

Holler if you get stuck again and welcome to the forums :slight_smile:

6

Try this in your css:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

footer {
  margin-top: auto;
}

Courtesey of kuligaposten

2 Likes
7

Thanks for all the help. I have made some progress from your suggestions. From the min 576px break point it works great. The others I still get this:

Screen Shot 2022-02-17 at 7.08.52 AM
Screen Shot 2022-02-17 at 7.08.52 AM724×2504 69.8 KB

Here is the css I was able to update:

body {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

#main-footer {
	margin-top: auto;
}

#main-frame {
	background: url("front-pic-logo.png") top no-repeat;
	background-size: contain;
	margin: 0px;
	padding: 0px;
	height: 100vh;
	width: 100%;
}

@media (min-width: 576px) {
	#main-frame {
		background: url("front-pic-logo.png") top no-repeat;
		background-size: cover;
	}
}
8

@noblebell

What you want to do do you with an img, not an background-image

html markup

<body class="d-flex flex-column vh-100">
	<main id="main-frame">
		<div class="d-flex flex-column justify-content-center align-items-center">
			<img src="/front-pic-logo.jpg">
			<div class="d-flex flex-column justify-content-center align-items-center position-absolute bottom-0 start-50 translate-middle-x">
				<h1 class="text-capitalize text-white fst-italic">Sarah Houk</h1>
				<a class="btn btn-warning btn-sm mt-4 mb-5" role="button" href="#contact">Contact me</a>
			</div>
		</div>
	</main>
	<footer class="mt-auto">
		<p class="text-center">Your footer content here</p>
	</footer>
</body>

CSS

#main-frame img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

Here is an example
My Sarah doesn’t looks as good as yours lol