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
.
