how to change size of text in css?

Question

I know this is a big vague but I cannot upload all the code because it is too big. Basically, i am trying to make the text smaller for small screens but it wont let me. I tried to change other features as well and some change but some don't.

To sum up, What is the difference between the features? What can be the reason that shadow worked but underlining didn't.

** currently the most important for me is the size feature, if there is a bypass for my problem i will be happy **

this is the css code that i tested:

@media only screen and (max-width: 700px)
{
    div.aaa
    {
// changed
        width: 100%;
        text-transform: lowercase;
        text-shadow: 3px 2px red;

// didnt change
        text-decoration: underline;
        font-size: 40px;
    }
}

Possible duplicate of [How to override the properties of a CSS class using another CSS class](https://stackoverflow.com/questions/20954715/how-to-override-the-properties-of-a-css-class-using-another-css-class) — Rémy Testa, Aug 10 '17 at 15:27

score 1 · Answer 1 · answered Aug 10 '17 at 15:30

At first sight your code looks good. Could you check in the browser via inspector what the font-size is of div.aaa (perhaps show us a screenshot)?

Maybe there is a specific selector available as in #wrapper div.aaa who has a font-size so you media query isn't overruling that one.
Or the !important rule is used somewhere else on the font-size of div.aaa?
As last I think of a possible (not visible for us) character that is between text-shadow: ... and text-decoration: ... but this is very rare.

score 1 · Answer 2 · answered Aug 10 '17 at 16:03

1

Try: font-size: 40px !important; As it said, it is important.

answered Aug 10 '17 at 16:03

KaZaT

254
2
15

score 0 · Answer 3 · answered Aug 10 '17 at 15:32

0

They function similarly to % but are font sizes that resize with the window.

Try this:

.some-paragraph{
     font-size: 5vw;
 }

Note: You may need to have this in your head:

<meta name="viewport" content="initial-scale=1">

answered Aug 10 '17 at 15:32

Samson Maben

310
2
4
15

Dom · Answer 4 · 2017-08-10T16:21:39.480

0

You need to change font size of text on media screen. You can try following code

.content_con{
   font-size: 50px;
   text-decoration: none;
  }
 @media screen and (max-width: 600px) and (min-width: 200px) {
    .content_con a{
     text-decoration: underline;
       font-size: 15px;
    }
}

<div class="content_con">
 <a href="#">testing content here</a>
</div>

You can change max-width & min-width according to your requirement.

edited Aug 10 '17 at 16:21

answered Aug 10 '17 at 15:59

Dom

343
1
2
12

While your code might work, it does not really explain or solve the error OP is experiencing. You introduced another media query and another selector. The problem here is that text-decoration and font-size are overriden by other rules that were not posted here. – Tom M Aug 10 '17 at 16:07

how to change size of text in css?

4 Answers4