CODEWITHSUNDEEP
htmlcss
Maxty
Maxty

Reputation: 9

How to change font size on Mobile?

I currently have this html code that shows on desktop. How do I can add the specific mobile code so I can reduce the font size to 35 px on mobile?

<div style="float: left; width: 100%;" class="sapMktBlock">
<h3 class="mobileheader" style="margin: 10px 0px 30px; line-height: 50px; letter-spacing: normal; font-family: Baskerville; font-size: 50px; font-style: normal; font-weight: normal; display: block; color: #000000 !important; text-align: center;">Looks Like Something <br />Caught Your Eye</h3>
<table class="deviceWidth" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; border-collapse: collapse !important; margin: 0 auto; max-width: 600px;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr></tr>
</tbody>
</table>
</div>

Upvotes: 0

Views: 1468

Answers (3)

Tonic
Tonic

Reputation: 45

Media queries are your best option for this, just do what ZeevhY Org. posted

Place it at the bottom of your CSS file or bottom of you script tag

@media (max-width:the max pixel value you want it to apply at(you can also do min)){
    // Write your code Here, for example
    .my-text{
        font-size:12px;
        color : red;    
    }
}

note: if you have multiple overlapping media queries you might need to use !important on some CSS tags so they apply.

Upvotes: 0

Krokodil
Krokodil

Reputation: 1470

Here is a very simple example of using css units vh and vw:

<h1 style="font-size: 7vh;">Becomes bigger on mobile devices</h1>
<h1 style="font-size: 7vw;">Becomes smaller on mobile devices</h1>

Upvotes: 0

ZeevhY Org.
ZeevhY Org.

Reputation: 365

You can use Media Queries like this.

Mobile Viewport sizes varies from 360 x 740, where 360 is width and 740 is height

@media (max-width:360px){
    // Write your code Here, for example
    .my-text{
        font-size:12px;
        color : red;    
    }
}

Upvotes: 1

Related Questions