Page Header Title Cut Off - Desktop & Responsive

- 8 years, 8 months ago riedmankatie
 Participant
 
 Expired
 
 Hello,
 
 On a few of my pages the header title is cut off on both desktop and mobile.
 
 Example: https://new.trygtech.com/wordpress/technologies/preferred-customer-technology/
 
 Should say “Preferred Customer Technology”
 
 Page says “Preferred Customer”
 
 Thanks in advance!
 
 Katie
- 8 years, 8 months ago Mirela
 Participant
 hello,
 
 You should decrease the font size. Go to General Options > Styling Options > Default Page Header > Centered Style No Subtitle Title Typography, decrease here the font size to at least 55px.
 Then add this code into your custom css box:
 
 @media (min-width: 979px) and (max-width: 1024px){ .header_page.centered h1 { font-size: 33px !important;} }
 
 Let us know.
 
 Best regards!
- 8 years, 8 months ago riedmankatie
 Participant
 
 Expired
 
 Hello,
 
 Thanks for your response. I made the changes you suggested and there are still issues. If I make the window smaller on the desktop display, words get cut off. Same issue with mobile. On the portrait display all the words are shown. On the landscape display when the font gets larger, some words get cut off.
 
 Screen shot of mobile landscape display (it should say Preferred Customer Technology):
 
 I’m having a few other issues with my pager headers (not sure if I need to create a new topic).
 
 1. Page title displaying wrong.
 
 On both desktop and mobile, after scrolling down a page and returning to the top, the page title is either gone or faded. Screen shots below.
 
 This is on mobile, but the same thing happens on desktop:
 
 Disappearing page title on desktop:
 
 Disappearing page title on mobile:
 
 2. Page header in mobile portrait view not proportional.
 
 The background looks too big and the font is too small. Is there a way to make this more proportional? Screen shot:
 
 3. Is there a way to completely remove the page header animation?
 
 Thanks in advance.
 
 Katie
- 8 years, 8 months ago Mirela
 Participant
 Hello,
 
 1-Please add this code into your custom css box:
 
 @media (max-width: 767px){ .header_page.centered h1 { font-size: 22px !important;} }
 
 2-Title faded: that’s because you have selected the type of page header with animation. Go to page’s General Settings > Page Header Options > Page header background, select “Fixed“, To remove it.
 
 3-When do the titles disappear? What did you do before? What browser are you using? This never happened on our side, whenever we have accessed your site.
 
 4-Titles in mobile: please add this code into your custom css box:
 
 @media (max-width: 480px){ .header_page h1 { font-size: 20px !important; }}
 
 Edit the value to your wish.
 
 5-Please see point 2.
 
 Best regards!
- 8 years, 8 months ago riedmankatie
 Participant
 
 Expired
 
 Hello,
 
 2-Title faded: that’s because you have selected the type of page header with animation. Go to page’sGeneral Settings > Page Header Options > Page header background, select “Fixed“, To remove it.
 
 This did not remove the animation. The page header still drops down when the page loads. Selecting Fixed just enlarged the image.
 
 Here the settings I have selected:
 
 Here’s what the header looks like with the above selections:
 
 3. The title disappears when you scroll down on a page and scroll back up to the top of the page. It’s happening on Chrome and Safari. I’m now using Internet Explorer to see if it happens. When I refresh the page, the title comes back. Then if you scroll down and scroll up it disappears again. It is also happening on multiple devices.
 
 Thanks.
- 8 years, 8 months ago Mirela
 Participant
 
 Hello,
 
 Please fill in the necessary information on your extra information fields of your profile data. So we can fix these for you.
 
 Read this article for more information.
 
 Best regards!
- 8 years, 7 months ago riedmankatie
 Participant
 
 Expired
 
 This reply has been marked as private.
- 8 years, 7 months ago Kris
 Participant
 
 Hello,
 
 2. Sorry, but in don’t see any animation on page header, except the codeless slider fadeInDown animation. To remove it, just select None on Codeless Slider Options > Content > Title animation.
 3. Did you manage to fix the issue? The title shows correctly when i scroll up back on the top of page, even on Internet Explorer.
 Let us know.
 
 Best regards!
- 8 years, 7 months ago riedmankatie
 Participant
 
 Expired
 
 This reply has been marked as private.
- 8 years, 7 months ago Mirela
 Participant
 
 Hello,
 
 Please refer to this topic: https://support.codeless.co/?topic=stop-header-transition-when-loading regarding the page title.
 Let us know.
 
 Best regards!