How to resize H1-H6 headers on mobile?

How to resize headings (h1-h6) on mobile?

Or how do I move my stiles.php file to a child theme? Since the style of headers is written in this file.

Sorry, I’m translating with a translator.

Как изменить размер заголовков H1-H6 на мобильном?

Hi,

We have a child theme already to help you easier starting with. You can download it from this link.

To modify the default theme’s CSS, look for the specific styles in the main theme’s stylesheet (style.css) you want to override. Then copy and paste it into a new line of child theme’s style.css. Then you can do your own styles with it.

Regards,
Kharis
aThemes Support

I actively use child theme and know how to write / change styles.

In this case, to change the h1-h6 headers on a mobile device, i need to write:

@media only screen and (max-width: 780px) { 
    	h1 { font-size: 24px!important;}
	h2 { font-size: 22px !important;}
	
    }

I have to use “!important” because on the first level I have the styles from “index”.

But I use elementor and if I write “!important”, then the all the custom settings of the heading in the elementor change too.

I found the styles.php file in the parent theme and found this code (
line 216) in it:

 //Small screens font sizes
    $custom .= "@media only screen and (max-width: 780px) { 
    	h1 { font-size: 32px;}
		h2 { font-size: 22px;}
		h3 { font-size: 22px;}
		h4 { font-size: 18px;}
		h5 { font-size: 16px;}
		h6 { font-size: 14px;}
    }" . "\n";

What do I need to do?

Hi,

Thank you for getting back.

styles.php line 216 defines headings font sizes on a screen under 781px wide. It is stored in that PHP file for global headings sizes are specified in the theme’s customizer (under the Appearance > Customize).

Hence you’ll need to add the below PHP snippet to your child theme’s functions to override those headings font sizes. And set your own sizes accordingly.

    add_filter('sydney_custom_css', function($custom){

      $headings = "\n" . "@media only screen and (max-width: 780px) { 
        	h1 { font-size: 32px;}
    		h2 { font-size: 28px;}
    		h3 { font-size: 22px;}
    		h4 { font-size: 18px;}
    		h5 { font-size: 16px;}
    		h6 { font-size: 14px;}
    	}" . "\n";

      return $custom . $headings;
      
    });

Adding, after doing so, you don’t need to write headings CSS in child theme’s style.css file.

Regards,
Kharis
aThemes Support

Thanks for the answer. But this code doesn’t work.

I don’t have an egoto filter: sydney_custom_css, but there is one: sydney_custom_styles. They both don’t work.