{"id":18462,"date":"2022-04-06T06:43:59","date_gmt":"2022-04-06T06:43:59","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=18462"},"modified":"2022-04-07T09:27:53","modified_gmt":"2022-04-07T09:27:53","slug":"how-to-modify-the-h1-h6-size-for-mobile-devices","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-modify-the-h1-h6-size-for-mobile-devices\/","title":{"rendered":"How to modify the H1-H6 size for mobile devices"},"content":{"rendered":"\n

In this option, we will show you how to modify the H1-H6 size for mobile devices for this follows the below steps:<\/strong><\/p>\n\n\n\n

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

\"\"<\/figure>\n\n\n\n

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 –<\/p>\n\n\n\n

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

For example:<\/strong><\/p>\n\n\n\n

@media (max-width: 768px){\n.amp-post-title {\nfont-size: 15px;\n}\n}<\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
So now the desktop users will have a font size of 17px and the mobile users will have a font size of 15px.<\/p>\n\n\n\n
That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n
\n\t\t\tAsk your Questions Directly!<\/strong>
\n\t\t\t
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t