The title of my pages is really small when viewed on a mobile phone. Here is a sample. https://hopestory.org/hope-advocate/
Could you help me make this font look better on mobile? Thank you!
Hello Rick,
Thanks for writing to us.
I checked your site it seems that you have added a custom CSS code for the Heading. Please have a look at the given screenshot below.
I would suggest you please remove the custom CSS code and set the font size from the Headline element settings. Please have a look at the given screenshot.
You can set the font size for all of the devices.
Hope it helps
Thanks
Thank you. I didn’t design the site and do not really have access to the developer who did our site. Do you think I will break anything if I take out his custom CSS? Do you have any suggestions on what to set the various title sizes to? Thanks!
I looked at my site’s custom css and I see all of this. Can you suggest anything I should do there? Thank you!
/** CUSTOM-CSS-MJC **/
/ Sub page heros. /
.sub-hero {height: 750px;}
.sub-hero2 {height: 1200px;}
.hero-head
{top: 300px;}
.hero-head2
{top:225px;}
.specialp
{font-size: 13pt !important;}
.bodycontent
{max-width:960px !important; margin: 20px auto !important;}
.bodycontent p
{line-height: 1.5 !important;}
.bodycontent h1
{font-family: “Poppins”,sans-serif !important;}
.h2body
{font-family: “Poppins”,sans-serif !important;}
.maxnews
{max-width: 1600px;}
@media (max-width: 480px) {
.specialp
{font-size: 13pt !important;}
.sub-hero {height: 500px;}
.sub-hero2 {height: 930px;}
.hero-head
{top: 140px; font-size:65px !important;}
.hero-head2
{top: 50px; font-size:65px !important;}
}
/ TOP VIDEO /
@media only screen and (max-width: 768px) {
.video-button {
width: 50px;
}
}
/ NAV-BAR /
/** nav-link-alignment **/
.x-nav-wrap.desktop {
float: right;
}
.x-navbar .x-brand {
float: left;
}
.masthead-inline .x-navbar .desktop .sub-menu {
left: 0;
right: auto;
}
/ I’M A… icon gone /
#menu-item-756 span:after {
display: none;
}
/ Full width nav-bar /
.x-navbar .x-container.max.width {
max-width: 100%;
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
/Donation-button-in-nav/
#menu-item-57 {
bottom: 15px;
border: none;
color: blue;
}
.x-navbar .desktop .x-nav>li>a>span {
border:0;
}
/ Line Height /
body p {
line-height: 1.1;
}
/ FOOTER /
/ Social /
.soc-1 {
margin-right: 5px;
}
.soc-2 {
margin-left: 5px;
}
/* Subscribe Form */
.tco-subscribe-form-808 fieldset {
display: inline;
}
.tco-btn-rounded {
position: relative;
bottom: 16px;
}
/ Subscribe Form - Responsive /
/ Desktop /
@media only screen and (min-width: 1400px) {
#tco-subscribe-form-808 input {
width: 485px;
}
#tco-subscribe-form-808 .submit {
width: 180px;
}
}
/ laptop sizes /
@media only screen and (max-width: 1500px) and (min-width: 980px) {
#tco-subscribe-form-808 input {
width: 385px;
}
#tco-subscribe-form-808 .submit {
width: 180px;
}
}
/ Ipad sizes /
@media only screen and (max-width: 1199px) and (min-width: 980px) {
#tco-subscribe-form-808 input {
width: 285px;
}
#tco-subscribe-form-808 .submit {
width: 180px;
}
}
/**** FULL RESPONSIVE HOME-PAGE *****/
/** TOP VIDEO **/
/ LATPOP screen - heading /
@media only screen and (max-width: 1500px) and (min-width: 900px) {
#slapped-head-video {
font-size: 160px;
}
}
/ LAPTOP screen - paragrpah /
@media only screen and (max-width: 1500px) and (min-width: 900px) {
#slapped-para-video {
font-size: 40px;
}
}
/ BIG MOBILE screen - paragrpah /
@media (max-width: 767px) {
#slapped-para-video {
font-size: 40px;
}
}
/ SMALL MOBILE screen - Heading /
@media (max-width: 480px) {
#slapped-head-video {
font-size: 50px;
}
}
/ SMALL MOBILE screen - paragrpah /
@media (max-width: 480px) {
#slapped-para-video {
font-size: 40px;
}
}
/ SMALL MOBILE -Scroll Button /
@media (max-width: 480px) {
.video-button {
position: relative;
left: 90px;
top: 30px;
}
}
/ Laptop / Scroll Button //**
@media (min-width: 980px) {
.video-button {
position: relative;
right: 50px;
top: 30px;
}
}
@media (max-width: 979px) {
.video-button {
position: relative;
right: 30px;
top: 50px;
}
}
/* LEARN MORE */
/ Laptop Screens - Learn More text /
@media only screen and (max-width: 1500px) and (min-width: 900px) {
#slapped-learn-more {
font-size: 35px;
}
}
/ ipad Screens - Learn More text /
@media only screen and (max-width: 980px) and (min-width: 768px) {
#slapped-learn-more {
font-size: 26px;
}
}
/ Padding for bigger screens /
@media only screen and (min-width: 980px) {
#learn-more-padding {
padding-right: 175px;
padding-left: 175px;
}
}
/ Ipad down to BIG mobile /
@media only screen and (min-width: 481px) {
#learn-more-padding {
padding-right: 100px;
padding-left: 100px;
}
}
/ SMALL MOBILE TEXT/PADDING /
/ para text /
@media (max-width: 480px) {
#slapped-learn-more {
font-size: 30px;
}
}
**/Padding for cols /
@media (max-width: 480px) {
#learn-more-padding {
padding-right: 50px;
padding-left: 50px;
}
}
@media (max-width: 480px) {
.learn-more-mob {
margin-bottom: 50px;
}
}
/ buttons/**
@media (max-width: 979px) {
.e780-18.learn-btn {
max-width: 60%
}
.e780-18.learn-btn span {
font-size: 18px;
}
.e780-24.learn-btn {
max-width: 60%
}
.e780-24.learn-btn span {
font-size: 18px;
}
.e780-30.learn-btn {
max-width: 60%
}
}
.e780-30.learn-btn span {
font-size: 18px;
}
/* OUR MISSION */
/ Laptop Screens - margin left /
@media only screen and (min-width: 980px) {
.left {
margin-left: 450px;
}
}
@media only screen and (max-width: 1199px) and (min-width: 980px) {
.left {
margin-left: 380px;
}
}
/ laptop screen paragrpah /
@media only screen and (max-width: 1500px) and (min-width: 768px) {
#slapped-our-mission {
font-size: 35px;
}
}
/ ipad screen paragrpah /
@media only screen and (max-width: 979px) and (min-width: 768px) {
#slapped-our-mission {
font-size: 26px;
}
}
/ SALL Mobile /
/ para /
@media (max-width: 480px) {
#slapped-our-mission {
font-size: 16px;
text-align: center;
}
}
/** SHARING HOPE HEADING */
@media (min-width: 980px) {
#slapped-head-sharing-hope h1 {
font-size: 50px;
}
}
@media only screen and (max-width: 768px) {
#slapped-head-sharing-hope {
font-size: 30px;
}
}
@media (max-width: 979px) {
#slapped-head-sharing-hope h1 {
font-size: 42px;
}
}
/** HOPE ADOVCATE **/
/ LAPTOP Screens - parapgrah /
@media only screen and (max-width: 1500px) and (min-width: 900px) {
#slapped-hope-advocate {
font-size: 26px;
}
}
/ laptop - slightly bigger - parapgraph /
@media only screen and (max-width: 1199px) and (min-width: 980px) {
#slapped-hope-advocate {
font-size: 35px;
}
}
/** HELP **/
/ LAPTOP screens - heading /
@media only screen and (max-width: 1500px) and (min-width: 900px) {
#slapped-help-head {
font-size: 160px;
}
}
/LAPTOP screens paragprah/
@media only screen and (max-width: 1500px) and (min-width: 900px) {
#slapped-help {
font-size: 35px;
}
}
/ IPAD screens - heading /
@media only screen and (max-width: 980px) and (min-width: 768px) {
#slapped-help-head {
font-size: 120px;
}
}
/IPAD screens - paragprah/
@media only screen and (max-width: 980px) and (min-width: 768px) {
#slapped-help {
font-size: 26px;
}
}
/* HOW WE hELP */
/ Background image /
@media only screen and (max-width: 1500px) and (min-width: 900px) {
#how-we-help-background .x-bg-layer-lower-image {
background-size: cover !important;
}
}
/LAPTOP screens - paragprah/
@media only screen and (max-width: 1500px) and (min-width: 900px) {
#slapped-how-we-help {
font-size: 35px;
}
}
/ Ipad Screens - parapgraph /
@media only screen and (max-width: 980px) and (min-width: 768px) {
#slapped-how-we-help {
font-size: 26px;
}
}
/* NEWSLETTER */
/ Laptop text /
@media only screen and (max-width: 1500px) and (min-width: 900px) {
#slapped-sub-headline {
font-size: 40px;
}
}
@media only screen and (max-width: 1500px) and (min-width: 900px) {
#slapped-sub-head {
font-size: 24px;
}
}
/ laptop just smaller text /
@media only screen and (max-width: 1199px) and (min-width: 980px) {
#slapped-sub-headline {
font-size: 30px;
}
}
@media only screen and (max-width: 1500px) and (min-width: 900px) {
#slapped-sub-head {
font-size: 18px;
}
}
/ IPAD SCREENS /
@media (max-width: 979px) {
#slapped-sub-headline {
font-size: 27px;
}
}
@media (max-width: 979px) {
#slapped-sub-head {
font-size: 27px;
text-align: center;
}
}
/ BLOG SECTION /
.x-recent-posts a {
border: none;
}
.x-recent-posts .x-recent-posts-content {
border: none;
}
.x-recent-posts .x-recent-posts-date {
text-align: center;
}
.x-recent-posts .h-recent-posts {
text-align: center;
font-family: ‘Poppins’;
font-size: 28px;
color: rgb(53, 59, 101);
}
.x-recent-posts .h-recent-posts{
white-space:normal;
}
/ Margin-left for Large screens /
@media only screen and (min-width: 1500px) {
.left {
margin-left: 450px;
}
}
@media only screen and (max-width: 980px) and (min-width: 768px) {
.left {
margin-left: 350px;
}
}
.blog p {
font-size: 24px;
}
.single-post .entry-featured,
.blog .entry-featured {
border: 0;
}
@media (min-width:767px){
.single-post .entry-featured,
.blog .entry-featured {
max-width: 80% !important;
margin: 0 auto;
border: 0;
}
}
.wp-block-embed {
margin-left: 0;
margin-right: 0;
}
.wp-block-image {
margin-left: 0;
margin-right: 0;
}
.wp-block-image .aligncenter,
.wp-block-image img {
width: 100%;
}
.postid-4654 .entry-featured {
display: none;
}
Hello Rick,
It would not break the site if you remove the custom CSS code but it may break the same layout designs that you have customized for your site. I would suggest you please add this custom CSS code under the Theme option —>CSS for the quick fix.
@media(max-width:600px){
.x-text.hero-head {
font-size: 30px !important;
}
}
Please feel free to change the font size as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding you can subscribe to One where customization questions are answered.
Hope it helps.
Thanks
Thank you. I did this, but now the text of the blog post entires on the home page are very big (https://hopestory.org)
It also looks like the text under “our mission” has gotten a lot bigger as well.
Hello Rick,
In order to help you with your concern, we need to check your settings. I would request you, please share your details in a secure note. Please provide the following details meanwhile you must troubleshoot a few common issues before we investigate your settings.
- WordPress Login URL
- Admin level username and password
You can find the Secure Note button at the bottom of your posts
Thanks
Thank you - I have created the secure note.
Hello Rick,
Thanks for sharing the login details, I went ahead and checked your settings, The custom CSS code is rendering from here.
Appearance—>Customize —>Additional CSS
You can remove this code from here or in case you are using this code somewhere else you can leave it or comment on it.
Now you need to remove this code from the Cornerstone---->Theme Option ---->CSS
@media(max-width:600px){
.x-text.hero-head {
font-size: 30px !important;
}
}
Now you need to follow these steps.
- Go to your page
- Click on the Text Element —>Customize ---->Remove the custom Class so that it would take the custom style from your custom CSS
- Now you need to set the font size from the Element, on the Text Element you need to Text—>Size—>Set the size for the font for all the devices.
Hope it helps
Thanks
Thanks, I’m confused because above I was given some css for a workaround. Is this something different?
Hello Rick,
If you use the new Text elements, it is highly recommended that you use it to utilize the element’s responsive styling without using any custom CSS because having a custom CSS can always lead to a conflict or issue sooner or later. To be familiar with the responsive styling like the font sizes in different screen sizes, kindly check out this documentation:
Best Regards.
Thanks, but I don’t know how to set that for everyone device and I’m not sure why the developer did what he did. Can you help me with a more simple workaround? The title on the home page is very big now.
Hello Rick,
The font size of the home page title is coming from the Theme Option —>CSS, I have attached the screenshot in the secure note please have a look at it and change the font size as per your design.
Hope it helps
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.