Text below text responsive

Question

How can I do my text responsive. For example on desktop

--------------------------------
   12  0  12   15              |
                               |
                               |
                               |
--------------------------------

And I want on mobile to go below, if the font-size is to big

------
  12 |
  0  |
  12 |
  15 |

Right now my text is not responsive..my numbers are against each other.

Here is the code i'm using:

.hasCountdown {
    text-shadow: transparent 0px 1px 1px;
    overflow: hidden;
    padding: 30px;
    /*cursor:pointer;*/
}

.countdown_rtl {
    direction: rtl;
}
.countdown_holding span {
    background-color: #ccc;
}
.countdown_row {
    clear: both;
    width: 100%;
    padding: 3px 2px;
    text-align: center;
}


.countdown_show4 .countdown_section {
    width: 24.5%;
}


.countdown_section {
    display: block;
    float: left;

    text-align: center;
    line-height: 200%;
    margin:3px 0;
    font-family:'halvetica_light';
}
.countdown_amount {
    font-size: 450%;
}


.countdown_amount_red
{   
    color:red;
}

Answer 1

You could try simply adding the below (As you have not supplied HTML for testing)

html{
    font-size: 2vw;
}

h1{
    font-size: 1em; /*Change h1 or size to fit requirements */
}

Answer 2

Take a look at this

This is bootstrap responsive design. Just by reading the link Grid System you can make your text responsive.

Answer 3

unfortunately with the above setup your fonts will never be responsive since you have nothing that takes into consideration the size of the device/window. Your approach (or at least the way you put it down) takes the font as the element that would make the whole thing responsive. I strongly suggest to get on and start using a mobile-first approach, and Luke Wroblewski explained it quite well back in '09

Once you got around that, you start realising that you want to achieve responsive typography . In order to achieve this, you have different solutions, and a bit more reading might be necessary if you want to understand which one works best and won't break when you start adding more complexity.

Below some a very quick explanation and some reference for your reading pleasure (at least as a starting point), of course, all these solutions use media queries , so be sure to know what's that too:

1. Use % or em for font-size measures, this is the most basic and immediate solution for what you're looking for. IMO it's a bit hard to maintain on the long run, but it could work for simple widgets/components ( How to make your typography responsive ).
2. Use rems as a unit size: this is worth investigating and it might require a bit of understanding of the underlying concepts behind it ( Responsive typography with REMs: How to build a scalable typographic foundation in three steps )
3. Use vh or vw as unit size, that is viewport height and viewport width, respectively. ( Viewport Sized Typography )

You can get creative and use a combination of these methods too to achieve a solution that would work best for you.

If you are interested digging a bit more into web typography, you can also take into consideration modular scale and vertical rhythm , but that's another story.

I hope this will help you address your problem and pick the right solution.