Home Page Site Title Not Same Size in Tablet/Mobile Portrait Mode


#1

I really like the Talon Pro theme!

I am having a problem with the size of the Site Title on the Home page being smaller than on all the rest of the pages when in tablet/mobile portrait mode. It is also smaller in the mobile landscape mode.

I hope you can suggest a way to correct this. The website is https://www.jacobdinezon.com/

Thanks so much!

Scott


#2

Hello Scott,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 991px) {
      h1.site-title {
        font-size: 35px !important;
      }
    } 

Regards,
Kharis


#3

Hi Kharis,

Thank you for the code. I tried it but the size of the title font on the Home page is still smaller than the title font on all the other pages. This is true in iPhone (portrait and landscape) and iPad (portrait). Further, in iPhone and iPad portrait mode the title and site description seem shifted to the right a little. They are not center on the screen.

It seems the title/site description font sizes on the other pages are not making it to the Home page.

Thank you for your continued help.

Scott


#4

Kharis,

Your suggested code helped me come up with this that seemed to work:

    @media only screen and (max-width: 991px) {
    	.site-title {
    		font-size: 40px !important;
    		text-align: center;
    	}
    	.site-description {
    		font-size: 20px !important;
    		text-align: center;
            }
    } 

Still, on the iPhone the title/site description seems to be shifted to the right.

Scott


#5

Hello Scott,

Try clearing cache on mobile web browser on your iPhone, then reload your site. As cache some times won’t load new code addition you applied. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis


#6

Hi Kharis,

Thanks for your reply. It was not an issue with the cache. The issue had to do with the removal of the menu button which left the site title and site description text shifted to the right.

Here’s what I did to compensate, and everything looks great now. The code for removing the hamburger menu button in favor of horizontal navigation links was suggested by tomdoe in an earlier forum post.

    @media only screen and (max-width: 991px) {
    	.main-navigation {
    		margin-top: -15px;
    	}
    	.site-content {
    		margin-top: 0px;
    	}
    	.site-title {
    		font-size: 37px !important;
    		text-align: center;
    		margin-right: 42px;
    	}
    	.site-description {
    		font-size: 20px !important;
    		text-align: center;
    		margin-right: 42px;
    }
    } 

    div.col-md-8.menu-container {
    	display: inline;
    }
    .menu-btn {
    	display: none;
    }
    .menu-btn-toggle {
    	display: none;
    }