CODEWITHSUNDEEP
htmlcssw3.css
Simon
Simon

Reputation: 9

Responsive text size using w3.css

I'm trying to make my website more responsive using w3.css (I know it's not everyone's favourite, but it seems simpler than trying to make my own CSS work for every browser and device).

Is there an elegant way to make text smaller on small screens using w3.css please? I have a header using a single table row, 5 columns, all h3 size. On a small screen I'd like this to be h4 or h5 so it all fits.

I don't want to use vw or it would be too big on large screens. I could duplicate the content and use w3-hide-small for one and hide the other version on medium and large screens but that doesn't seem like good practice. Alternatively, should I use media queries or is there a way in w3.css? 

<table class="w3-container w3-table">
 <tr>
  <td>
  <h2 id="date1"><b>title1</b></h3>
  </td>
  <td class="w3-black w3-center">
  <h3>title2</h3>
  </td>
  <td class="w3-center">
  <h3>title3</h3>
  </td>
  <td class="w3-center">
  <h3>title4</h3>
  </td>
  <td class="w3-center">
  <h3>title5</h3>
  </td>
 </tr>
</table>

Upvotes: 0

Views: 1768

Answers (3)

Daan Koning
Daan Koning

Reputation: 165

There are 2 things you can do; neither use w3.css but function just fine; one of which does use vw as a unit but should work out

Option 1

you can use @media screen and (min-width: any_size){}. Which works like this:

/* if the screen is wider than 500px set the font size to 80px */
@media screen and (min-width: 500px) {
  .dynamicallyScale {
    font-size: 80px;
  }
}
/*if the screen size is less than 499px set the font size to 80px */
@media screen and (max-width: 499px) {
  .dynamicallyScale {
    font-size: 30px;
  }
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<table class="w3-container w3-table">
 <tr>
  <td>
  <h2 id="date1" class="dynamicallyScale"><b>title1</b></h3>
  </td>
  <td class="w3-black w3-center">
  <h3 class="dynamicallyScale">title2</h3>
  </td>
  <td class="w3-center">
  <h3 class="dynamicallyScale">title3</h3>
  </td>
  <td class="w3-center">
  <h3 class="dynamicallyScale">title4</h3>
  </td>
  <td class="w3-center">
  <h3 class="dynamicallyScale">title5</h3>
  </td>
 </tr>
</table>

Needless to say, you can also use any other way of defining size such as em and % However, this change is really abrupt and will require a lot, and I mean a lot of min-width: and max-width: statements to look smooth so will probably require a whole separate CSS file to work and is, in general, just a bad coding practice.

Option 2

You can use the vw unit. This dynamically scales the text size depending on the size of the viewport width(which is what vw stands for). so you could do something a little bit like this: 

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<table class="w3-container w3-table">
 <tr>
  <td>
  <h2 id="date1" style="font-size:8vw;"><b>title1</b></h3>
  </td>
  <td class="w3-black w3-center">
  <h3 style="font-size:6vw;">title2</h3>
  </td>
  <td class="w3-center">
  <h3 style="font-size:4vw;">title3</h3>
  </td>
  <td class="w3-center">
  <h3 style="font-size:2vw;">title4</h3>
  </td>
  <td class="w3-center">
  <h3 style="font-size:1vw;">title5</h3>
  </td>
 </tr>
</table>

Of course you could use other sizes than in my example but you should see that if you resize the window the text size dynamically changes. While this doesn't use w3.css it is the best possible solution.

Upvotes: 1

Nikhil
Nikhil

Reputation: 3950

you can can use Bootstrap for it its a new technology and what you are looking for is basically a bootstrap grid system that will work perfectly as per your requirement. all the best!!

Upvotes: 0

Yahya Essam
Yahya Essam

Reputation: 1912

You may use Bootstrap framework for responsive cause it's more popular and rich.

for responsive text you may use media query or use units instead of pixels.
you may find some useful information about css units in this link :

https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

also you can get bootstrap framework from here :
http://getbootstrap.com/

and here's bootstrap doucumentation about typography:
https://getbootstrap.com/docs/4.1/content/typography/

Upvotes: 0

Related Questions