How to modify the H1-H6 size for mobile devices

In this option, we will show you how to modify the H1-H6 size for mobile devices for this follows the below steps:

You will find this option in the WordPress Dashboard -> Navigate to AMP option panel -> Design -> Signal -> Enable H1 – H6 Font Sizes option as shown below the screenshot.

It will change the font size to 17px in AMP for both the desktop users and also for the mobile users BUT if you want to make the font size different for desktop and mobile users then you can add this CSS and add it like –

You will find this option in the WordPress Dashboard -> Navigate to AMP Option Panel -> Design -> Global -> In Custom CSS add this code like below the screenshot.

For example:

@media (max-width: 768px){
.amp-post-title {
font-size: 15px;
}
}

So now the desktop users will have a font size of 17px and the mobile users will have a font size of 15px.

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.

Share
Published by
Sonali R

How to create an AWeber form in AMP

If you want to add an AWeber form in AMP then first you need to…

3 years ago

How to setup webpushr notification in AMP

Webpushr is the fastest growing web push notifications platform that marketers love & developers rely…

3 years ago

How to add Adobe Analytics in AMP

Follow these steps to add Adobe Analytics in AMP Step 1: Go to WordPress Admin Area -> AMP…

3 years ago

What is the CWV plugin all about

Core Web Vitals are the subset of Web Vitals that apply to all web pages,…

4 years ago

How to fix “Alternate page with proper canonical tag” Page Index issue in Google Search Console

The following reasons can be shown for non-indexing. Server error (5xx) Your server returned a 500-level…

4 years ago

Google Analytics ( GA4 ) integration in AMPforWP

We have added the Google Analytics 4 ( GA 4 ) integration in AMPforWP v1.0.80.…

4 years ago