1

Website http://www.l-evate.co.uk/wellbeing/

The text over the balloon video "Healthy & Happy People Create Success" should be smaller on mobile. And I am trying to change the text underneath also. I have tried everything!

Tried using screen only, max-device-width etc. Nothing seems to change the text.

This is my code:

@media (max-width: 480px) {
    h3.uppertext {
        color: #ff0000 !important;
        font-size: 18px !important;
        text-align:center;
    }

    .textwidget h4 {

        font-size:18px !important;
        line-height:24px !important;
    }
}

Can anyone please help??

martinho
  • 1,006
  • 1
  • 10
  • 24
Zena Bratcher
  • 13
  • 3
  • 1
    Don't see any problem on your link on chrome desktop. Also, please use snippet to post your code and care pasting your code the right way. On a side note, you shouldn't use `!important` in your CSS. More information [here](https://stackoverflow.com/a/3706876/3548983) – NicossB Aug 14 '18 at 13:27

2 Answers2

0

change the query with :

@media screen and (max-width: 480px) {}

pixellab
  • 588
  • 3
  • 12
0

It looks like the page is working as expected when resizing a browser window on desktop, perhaps change the max-width value if you'd like the text to change size sooner. Also, remember that most modern smartphones have quite high resolution displays so on a mobile with a screen width of 1080px, your code won't work so you'll also need to define the media type (that might be the wrong name for it).

Try this:

@media only screen and (max-width: 480px) {
    h3.uppertext {
        color: #ff0000 !important;
        font-size: 18px !important;
        text-align:center;
    }

    .textwidget h4 {

        font-size:18px !important;
        line-height:24px !important;
    }
}
sMiLEy sLOth
  • 128
  • 9