CODEWITHSUNDEEP
htmlcss
GMarx
GMarx

Reputation: 483

Need CSS for H1 text to not overflow when screensize small

I have two big H1 elements I'd like next to each other when the screen is large, and then to move one above the other below when the screen size is smaller. I figure I can use this as simply as possible with CSS, yet I'm having trouble. With the below code, the text will overflow overtop of each other when the screen is smaller.

HTML:

<div class="bigCTA">
  <div class="numbers" style="text-align: center;">
    <h1 id="numEvents" class="title">3,500+</h1>
    <br>
    <sm class="events-text">Events Held</sm>
  </div>

  <div class="numbers">
    <h1 class="title" style="margin-left: 25px;">$275M+</h1>
  <br>
    <sm class="events-text" style="margin-left: 25px;">Raised</sm>
  </div>
</div>

CSS:

.numbers {
  display: inline-block;
  width: 33%;
  padding: 5%;
}

.events-text {
  font-size: 20px;
  text-align: center;
  position: relative;
  top: -40px;
}

.title {
  display: inline-block;
  margin: 8% auto;
  font-size: 80px;
  padding: 8%;
}

.bigCTA {
  display: inline-block;
  text-align: center;
  width: 90%;
}

Upvotes: 1

Views: 818

Answers (2)

Zeev Katz
Zeev Katz

Reputation: 2273

All you need it use Media Queries. You can read about it here.

Now to your problem. I'm edit your code and tried to make it very simple. you can see my changes and compare to your code. (html is the same)

Hope this help you.

HTML:

<div class="bigCTA">
  <div class="numbers" style="text-align: center;">
    <h1 id="numEvents" class="title">3,500+</h1>
    <br>
    <sm class="events-text">Events Held</sm>
  </div>

  <div class="numbers">
    <h1 class="title" style="margin-left: 25px;">$275M+</h1>
  <br>
    <sm class="events-text" style="margin-left: 25px;">Raised</sm>
  </div>
</div>

CSS:

h1 {
  margin: 0;
}

.numbers {
  display: inline-block;
  float: left;
  width: 50%;
}

.events-text {
  position: relative;
  top: -20px;
  font-size: 20px;
}

.title {
  font-size: 80px;
}

.bigCTA {
  display: block;
  text-align: center;
  width: 90%;
}

@media (max-width: 600px) {
  .numbers {
    width: 100%;
  }
}

Working Fiddle

Upvotes: 1

liborza
liborza

Reputation: 1009

The easiest answer is to using MEDIA QUERIES: 

@media(max-width: 768px) {
  .numbers {
    width: 100%;
  }
}

That means.. if width of the site is equal or less than 768 it's gonna use this instead of original CSS..

Upvotes: 1

Related Questions