Can my headline have a different font-size on mobile devices?

Text will have the same font-size on desktop and mobile devices. When you have a quite big headline, it might be a good idea to have a smaller headline on mobile devices so the headline doesn't run over the whole screen.

Even if you are not that familiar with CSS, we can guide you to change the font-size or other style elements with CSS in Skins.

Click at the text you want to change to see what class the text has applied. When the text has the class Heading 1, you should use H1 in the CSS

css1.png

Heading 1 » H1
Heading 2» H2
Text 1 » P1
Text 2 » P2
Link 1 » L1
Link 2 » L2
Header Header » HeaderH
Header Text » HeaderP
Header Link » HeaderL
Footer Header » FooterH
Footer Text » FooterP
Footer Link » FooterL


Then you go to Skins, either directly to the tab Scripts or, if you just want to change the style for a project, select the project first. 

In Scripts go to Email and CSS where you can add the code. When for example Heading 1 should be 18px on mobile devices, add the following code:

@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
.H1 {font-size: 18px !important;}
}


When you also want to have the main text to be in an other size and color, you can add the code:

@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
.H1 {font-size: 18px !important;}
.P1 {font-size: 14px !important; color: #333333;}
}


You can copy & paste the code exampels from above, just change the class name to the one you need and the value you want to have.

Save the changes you made, reload your email draft or boilerplate, go to Test (or Summary), choose the Smart phone as device for the preview and you will see the changes.

css2.png

 


You can also use other CSS code change the text style - and not just for mobile-devices. When you want to overwrite style for all screen sizes because you can't change it in the Style section in Skins, the media query is not necessary and you just add 

 .H1 {text-shadow: 2px 2px #FF0000;}

if you want to give the Heading 1 a red shadow.


Just remember that not all CSS properties work in email and not all email clients support CSS (like Outlook on Windows - there the Heading 1 would display without the shadow).

 

 

Was this article helpful?
0 out of 0 found this helpful