Change header text size for mobile only

[Givilo]

Hello,

How can I make a font size of a header text smaller when the website is open on a mobile phone.

[andrii]

Hi,

You can use for example this CSS snippet:

@media only screen and (min-width: 48em) {
.header-navbar {
 font-size: 12px;
}
}

Please note that it can require further customization.

[Givilo]

Thank you, Andrii. Unfortunately, it did not change anything. Just to clarify, I want to change the font size of the text of the header on the home page.

[andrii]

Hi,

Please use this CSS snippet:

@media only screen and (max-width: 48em) {
h1.wp-block-heading {

 font-size: 15px !important;

}
}

Please note that it can require further customization.

Also, you can refer to this topic How can I change header text size? - #3

[Givilo]

Still no affect on the font size.

[andrii]

Hi,

We have provided you with a different code for the entire header. Please send a screenshot of the text you need to change, and we will try to help.

[Givilo]

Hi Andrii,

Please see the attached screenshot of the header.

[andrii]

Hi,

We checked this CSS snippet, and it work correctly:

@media only screen and (max-width: 48em) {
h1.wp-block-heading {

 font-size: 15px !important;

}
}

Please make sure you add this snippet using this doc How to add custom code snippets - HivePress Help Center

Also, If you use a caching plugin, make sure that caching is disabled for logged-in users.

[Givilo]

Thank you, Andrii. It looks like my title was in H2 and the snippet did not affect it. I changed it to H1 and now it works.

Cheers,
Givi

[milosevic1998]

Hi, I have two questions:

1. Do you have some snippet to hide header text at all on mobile devices (Title and text under it)?
2. Are there some snippet to make menu on mobile phone drop from the top and to not drop to the bottom but to the half of the screen or as deep as it needs to show all the content?

[milosevic1998]

…and menu items to be in the center of the block

[andrii]

Hi,

1. Please use these CSS snippets:

@media only screen and (max-width: 48em) {
h1.wp-block-heading {
 display: none;
}
}

@media only screen and (max-width: 48em) {
.header-hero__content p.has-medium-font-size{
 display: none;
}
}

Please note that it can require further customization.

2. Sorry, there’s no simple code snippet for this, it would require a custom implementation. If customizations beyond the available features are required for your site, please consider hiring someone for custom work https://fvrr.co/32e7LvY

[milosevic1998]

Thanks!