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;
}

Check this out https://stackoverflow.com/questions/39761791/bootstrap-responsive-table-within-displaytable/39761928#39761928 — SAM, Sep 29 '16 at 08:09

score 0 · Answer 1 · answered Sep 29 '16 at 08:07

0

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 */
}

answered Sep 29 '16 at 08:07

Sauced Apples

1,163
2
14
37

score 0 · Answer 2 · answered Sep 29 '16 at 08:26

0

Take a look at this

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

answered Sep 29 '16 at 08:26

MahanTp

744
6
16

score 0 · Answer 3 · answered Sep 29 '16 at 09:36

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:

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

Text below text responsive

3 Answers3