How do I make my sites mobile version font size bigger?

HTML & CSS
1

Hi from freezing -2°

I’d like to make my the font bigger on the mobile version of http://www.website-project-manager.co.uk/

Can anyone give me any advice please, I hear 16px is a standard, would this do it?

@media only screen and (max-width: 767px) {
    .my-class {
       font-size: 2em;
    }
}

Thank in advance,
David

2

That should do it. If you are using the default size of 16px, 2em should give you 32px.

1 Like
3

No that will do nothing for mobile devices unless you add the meta viewport tag to the head of the document. :slight_smile:

Without the viewport tag the site will be assumed to be 980px (or thereabouts) and just shrunk smaller until it fits. The 767px media query will not apply as it will assume it is a desktop size.

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

2 Likes
4

Yes, font size 16px is a standard size. you can use it but about using it you saw font size big or small. you can change the website font size 1 px increase or decrease. 1em = 16px, 2em =32px.
You can use a max-width of 575 for a mobile screen. It is good.

@media only screen and (max-width: 575px) {
.my-class {
font-size: 1em;
}
}

5

Thank you to everyone’s solutions here, they work :slight_smile: I now have a mobile version I can read!

6

Thank you, didn’t realise I had to do this.

1 Like
7

I didn’t notice it was missing as Paul did.
This tag is the first pre-requisite for responsive design.

4 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.