CODEWITHSUNDEEP
htmlcss
cabita
cabita

Reputation: 852

Text ocupies all with of the device without any margin bottom

I need to achieve:

enter image description here

the text "contact us" occupies the entire width in one line on any device and does not have any bottom margin, always at the bottom of the device without any space. However when I resize the window it creates a margin, I don't put fixed as it is only on one section of the page. How can I do that?

I have this code:

.slide {
  height: 100vh;
  background: black;

}

.slide:after {
  content: "Contact us";
  position: absolute;
  bottom: 0;
  font-size: 16vw;
  font-weight: 900;
  text-transform: uppercase;
  left: 0;
  right: 0;
  text-align: center;
  vertical-align: baseline;
  color: rgba(255, 255, 255, 0.5);
  max-height: 334px;
}
<div class="slide section1">
</div>

Finally the solution was the next:

<div class="slide">
  <div class="other-content"></div>
  <div class="contact">Contact us</div>
</div>

.slide {
  height: 100vh;
  background: black;    
}

.contact {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    color: rgba(255,255,255,0.5);
    text-align: center;
    font-size: 16.5vw;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 0.7;
    margin: 0 auto;
}

https://codepen.io/cabita/pen/bGeBJQW

Upvotes: 1

Views: 68

Answers (1)

Santosh Jaiswal
Santosh Jaiswal

Reputation: 46

This might help you. You can play with line-height to adjust the space at the bottom of the text.

.slide {
  height:100vh;
  color: rgba(255, 255, 255, 0.5);
  width: 100vw;
  background: #000;
  max-height: 334px;
  font-size: 15vw;
  font-weight: 900;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 0.7;
}

.slide:after {
  content: "Contact us";
}
<div class="slide section1">
</div>

Upvotes: 2

Related Questions