Need CSS for H1 text to not overflow when screensize small

Tags: html css
By : GMarx
Source: Stackoverflow.com
Question!

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%;
}
By : GMarx


Answers

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

By : Zeev Katz


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..



You need a logical condition in the while. Perhaps

program.toUpperCase().equals("Y")
By : nicomp


This video can help you solving your question :)
By: admin