Can't Make page fill entire screen

Wappler General Need Help
1

I’ve changed view port on every place i could to min-height 100vh. Something is stopping it from filling the page. What am I missing?

image
image1921×1009 35 KB

2

Hello, what is the screen suppose to fill with? Doesn't look like you have enough content to fill a screen?

3

Need to center the content vertically and horizontally then use clamp () for font sizing...

font-size: clamp(minimum, preferred, maximum);

I've cheated using an LLM to describe the methodology as saves me writing it but we have done similar in the past.

body {
  margin: 0;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  background: #6c737c;
  font-family: sans-serif;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;

  padding: 2rem;
  box-sizing: border-box;
}

/* Headings */
h2 {
  font-size: clamp(1.2rem, 2vw, 2.5rem);
}

/* Paragraphs / menu items */
p,
li {
  font-size: clamp(0.9rem, 1vw, 1.2rem);
}

/* Prices */
.price {
  font-size: clamp(1rem, 1.2vw, 1.4rem);
  font-weight: bold;
}

/* Mobile layout */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

How clamp() works

font-size: clamp(minimum, preferred, maximum);

Example:

font-size: clamp(1rem, 2vw, 2rem);
  • Never smaller than 1rem
  • Scales with viewport width (2vw)
  • Never larger than 2rem

This prevents text from becoming:

  • tiny on phones
  • enormous on large monitors
4

those are columns not going all the way to the bottom. they stop for no reason.

5

What are you expecting the text to do? It will always be at the top regardless of the heigth of the container. Maybe I just don't understand what you are trying to achieve.

6

Have you tried defining a class and applying it to the container.

.full-height { 
    min-height: 100vh; 
   
}

The adding class "full-height" in the class properties

7

I do not quite understand what the problem is, but judging from other replies, you want the page to extend to the bottom of the screen, no matter what the content.

Maybe this will help you out, it will work, even without a footer:

8

I don't think that will do what the user is trying to do? Sounds like he wants the content to stretch through the whole page from what I understand. That's just not possible?