How to make the banner page title smaller on mobile devices?

Hi team,

How to make the banner page title smaller on mobile devices?

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

body .title-size-small {
    padding-top: 100px;
    padding-bottom: 100px;
}

Increase or decrease 100px as per your needs

Best Regards

Thanks for the info that part I know, however, I may have explained it wrong earlier. Please view attachment image for reference?

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

body .page-title.color-scheme-light .entry-title {
    font-size: 20px;
}

Please replace 20px with the font-size you need.

Best Regards

Okay thanks that worked for the mobile but then my banner padding became smaller on the desktop version. Here is the code I had prior to adding the new you code.

CODE PRIOR:

body .title-size-small {
padding-top: 200px;
padding-bottom: 200px;
}

THEN WHEN I ADDED YOUR CODE TOO LIKE THIS:

body .title-size-small {
padding-top: 200px;
padding-bottom: 200px;
}

body .page-title.color-scheme-light .entry-title {
font-size: 20px;
}

IT MESSED THE BANNER PADDING UP.. what part of the css do I need to change to keep the same padding height while being able to make the page title font size smaller for mobile version?

Hello,

Delete the duplicating code which I have given above:

body .title-size-small {
    padding-top: 100px;
    padding-bottom: 100px;
}

And increase the paddings in the code which you had before

Best Regards

Okay I did, reference to the image I attached. Pretty much the same thing as before the css code controls the padding of my header but how do I control the font size for the entry title on mobile?

Attachments:

You must be logged in to view attached files.

Hello,

Remove all the code which I have provided. Then just add this one:

body .page-title.color-scheme-light .entry-title {
    font-size: 20px;
}

This code changes the font-size and does not touch the paddings, which stipulate the height of the title.

Best Regards

[Author]

Posts