CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Luiscri
Luiscri

Reputation: 1037

Resize text-size responsively so that it is showed on the same line

I'm using a navigation guide of my site whith anchors which I want to be displayed on the same line. On computers there is no problems as the width of the screen is bigger than the length of my text (only 5 words), but on mobile phones the text writes on two differents lines.

I have tried to add the CSS property white-space: nowrap; to the div containing the text but with this the part of the text that doesn't fit on the line simply would disapper by the overflow of the page. Is there a way to combine this property with another one so that if the text doesn't fit on one line the size of the text decrease to a size which would fit?

I'm using BootStrap 4 btw.

HTML

<section>
    <div class="container">
        <div class="row mb-5">
             <div class="col-12 nowrap">
                 <a class="mr-1 noDecoration" href="tienda.php">Tienda</a> > <a class="mx-1 noDecoration" href="tienda.php#sudaderaIcon">Sudaderas</a> > <span class="ml-1">Sudadera Tape Verde</span>
             </div>
        </div>
    </div>
</section>

CSS

.nowrap {
    white-space: nowrap;
}

.noDecoration, .noDecoration:hover {
    text-decoration: none;
    color: #000000;
}

Upvotes: 0

Views: 2521

Answers (2)

Zuber
Zuber

Reputation: 3473

Try this code, see the snippet in full-page and resize the browser window

.nowrap {
    white-space: nowrap;
    font-size: 14px; // Added
    font-size: 3.4vw;  // Added
  }

.noDecoration, .noDecoration:hover {
    text-decoration: none;
    color: #000000;
    font-size: 14px; // Added
    font-size: 3.4vw; // Added  
  }
<section>
    <div class="container">
        <div class="row mb-5">
             <div class="col-12 nowrap">
                 <a class="mr-1 noDecoration" href="tienda.php">Tienda</a> > <a class="mx-1 noDecoration" href="tienda.php#sudaderaIcon">Sudaderas</a> > <span class="ml-1">Sudadera Tape Verde</span>
             </div>
        </div>
    </div>
</section>

working fiddle here

Upvotes: 1

kiranvj
kiranvj

Reputation: 34107

You should use media queries to change the font size base on screen width

@media screen and (max-width : 320px)
{
  #your-element
  {
    font-size:7px; /* or 1em */
  }
}
@media screen and (max-width : 1204px)
{
  #your-element
  {
    font-size:16px;
  }
}

You can also try vw, vh, vmin mentioned here, but its not widely supported.

Upvotes: 3

Related Questions