CODEWITHSUNDEEP
htmlcssflexbox
Mitrixsen
Mitrixsen

Reputation: 323

Why do my Flexbox elements with set height no longer work after setting min-height to the parent?

I am re-doing the official Tesla website just to get a bit of practice, I am aiming for the Cybertruck page. Here is the official look of it.

https://www.tesla.com/cybertruck

The page consists of one section that I gave a min-height of 100vh. The section contains two elements (text and a button that are inside a span) and I want to position them to the bottom-center of the section by using Flexbox.

Core of the problem

The text and button align perfectly to the center, but not to the bottom. I gave the span element a flex-direction: column and align-items: center which works fine, however, the elements don't align themselves to the bottom of the section when I use justify-content: flex-end and height: 90%.

Do you have any suggestions on how to deal with this problem?

.main-cybertruck-section {
    background-image: url('../IMGs/cybertruck-page/cybertruck-main.jpg');
    background-position: center;
    background-size: cover;
    padding-top: 1px;
    min-height: 100vh;
    
}

.cybertruck-utility {
    font-size: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; 
    height: 90%;
    
}

.cybertruck-neon-text {
    color: rgb(255, 255, 255);
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 40px #0ff,
      0 0 80px #0ff,
      0 0 90px #0ff,
      0 0 100px #0ff,
      0 0 150px #0ff;
    padding-top: 1px;
}

.cybertruck-order-button {
    text-decoration: none;
    text-shadow: 0 0 1em #fff;
    box-shadow: 0 0 1em 0;
    color: #fff;
    border: 0.5em solid;
    padding: 0.01em 2em 0.01em 2em;
    margin-top: 2em;
}
<body class="cybertruck">
    <section class="main-cybertruck-section">
        <span class="cybertruck-utility">
          <p class="cybertruck-neon-text intro-text">BETTER UTILITY THAN A TRUCK WITH MORE PERFORMANCE THAN A SPORTS CAR</p>
          <a class="cybertruck-order-button" href="#">ORDER NOW</a>
        </span>
    </section>
</body>

Upvotes: 0

Views: 722

Answers (3)

Ridoy Dey
Ridoy Dey

Reputation: 49

In .main-cybertruck-section section you have to use height instead of min-height.I practiced it . It was work for me.

here is my css snippets:

.main-cybertruck-section {
    background-image: url('../img/cybertruck.jpg');
    background-position: center;
    background-size: cover;
    padding-top: 1px;
    height: 100vh;
    
}

.cybertruck-utility {
    height: 90%;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; 
    text-align:center;
}

.cybertruck-neon-text {
    color: rgb(255, 255, 255);
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 40px #0ff,
      0 0 80px #0ff,
      0 0 90px #0ff,
      0 0 100px #0ff,
      0 0 150px #0ff;
    padding-top: 1px;
}

.cybertruck-order-button {
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 1em #fff;
    box-shadow: 0 0 1em 0;
    color: #fff;
    border: 0.5em solid;
    padding: 0.01em 2em 0.01em 2em;
    margin-top: 2em;
}

Upvotes: 1

Reinhard Schnetzinger
Reinhard Schnetzinger

Reputation: 194

The problem is that your elements are indeed aligned at the flex end, but since the height of the <span> is as high as its child elements, you don't see that. If you would replace the height: 90% with an fixed height like height: 90vh it would actually work.

Another approach is to align the <span> itself within the <section>, as shown in the following example:

.main-cybertruck-section {
    background: lightgray; /* replaced image with color, because link was broke */
    background-position: center;
    background-size: cover;
    padding-top: 1px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.cybertruck-utility {
    font-size: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cybertruck-neon-text {
    color: rgb(255, 255, 255);
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 40px #0ff,
      0 0 80px #0ff,
      0 0 90px #0ff,
      0 0 100px #0ff,
      0 0 150px #0ff;
    padding-top: 1px;
}

.cybertruck-order-button {
    text-decoration: none;
    text-shadow: 0 0 1em #fff;
    box-shadow: 0 0 1em 0;
    color: #fff;
    border: 0.5em solid;
    padding: 0.01em 2em 0.01em 2em;
    margin-top: 2em;
}
<body class="cybertruck">
    <section class="main-cybertruck-section">
        <span class="cybertruck-utility">
          <p class="cybertruck-neon-text intro-text">BETTER UTILITY THAN A TRUCK WITH MORE PERFORMANCE THAN A SPORTS CAR</p>
          <a class="cybertruck-order-button" href="#">ORDER NOW</a>
        </span>
    </section>
</body>

Upvotes: 1

Tevin Banton
Tevin Banton

Reputation: 21

If your aim is to move the span to the end of the section then you should have the section be a flex container. Then you only need to set the flex direction to a column and set justify-content to flex-end.

.main-cybertruck-section{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

Upvotes: 1

Related Questions