Custom Headings odd on mobile

custom headings Mobile

- 7 years, 11 months ago tfussell1
  Participant
  
  Expired
  
  Hi there, all 7 of my custom headings look great on desktop, but not so great on mobile (too big and running off the screen). How can I get them to resize/respond to mobile sizes.
  
  vchainanalytics.com
- 7 years, 11 months ago Mirela
  Participant
  Hello,
  
  Please add this code into your custom css box:
  
  @media (max-width: 480px){ h3.vc_custom_heading { font-size: 30px !important;} h1 { font-size: 50px !important;} h5 { font-size: 35px !important;} h2 { font-size: 46px !important;} }
  
  Let us know.
  
  Best regards!
- 7 years, 11 months ago tfussell1
  Participant
  
  Expired
  
  Thanks Mihaila,
  
  This did the trick for mobile, but it also changed all the type sizes on desktop. How can I keep the original desktop sizes but the new sizes for mobile?
- 7 years, 11 months ago tfussell1
  Participant
  
  Expired
  
  Also, if you look at the mobile version, all the type is fitting on the screen nicely, but the breaks are such that there’s only one word per line (see headline up top). How can we make it look closer to this on mobile (i’m using iPhone 6):
  
  WE ILLUMINATE
  
  THREATS AND
  
  OPPORTUNITIES
  
  ACROSS VALUE
  
  CHAINS AND
  
  RELATED CRITICAL
  
  INFRASTRUCTURE
- 7 years, 11 months ago tfussell1
  Participant
  
  Expired
  
  Okay, forget about my earlier post about the type sizes. I was able to correct the issue. Still hoping for some help on the line breaks for mobile. Thanks.
- 7 years, 11 months ago Mirela
  Participant
  
  Hello,
  
  The line breaks happen because the font is still quite large and it’s not possible to keep another full word in the same line. If you want to have more text in a line, then keep reducing the font size.
  
  The code i gave you is only for mobile. The @media rule makes it have effect only in screens smaller to 480px (mobile). Not ipad or desktop. Please check that you have pasted it correctly.
  Let us know.
  
  Best regards!
- 7 years, 11 months ago tfussell1
  Participant
  
  Expired
  
  The mobile font is currently set to 35px and there is plenty of room for the line not to break like that. When I change it to 25px, the breaks are the same. And when I change it to 15px, the breaks start to change a bit, but there’s still tons of white space to the right of the breaks.
- 7 years, 11 months ago tfussell1
  Participant
  
  Expired
  
  Here’s a link to a screenshot with the font set to 15px: https://postimg.org/image/f02qmd3vt/
- 7 years, 11 months ago Mirela
  Participant
  Hello,
  
  I understand your point now. Please add this code too:
  
  @media (max-width: 480px){ .vc_custom_1501106751399 { margin-right: 5px !important; }}
  
  The row has margin set up that stops the line pass more than a certain width.
  Result screenshot: https://postimg.org/image/mbplauktx/
  Let us know.
  
  Best regards!
- 7 years, 11 months ago tfussell1
  Participant
  
  Expired
  
  Thanks again for the code. Your screenshot looked good, but unfortunately the code had no effect. ??
- 7 years, 11 months ago tfussell1
  Participant
  
  Expired
  
  This reply has been marked as private.
- 7 years, 11 months ago Mirela
  Participant
  Hello,
  
  You had added margin to the heading element (screenshot). This was causing the margin in mobile and was not letting the custom css take effect. I removed it and now the mobile version is ok too.
  
  I removed the custom css added before to remove the margin as it is not needed anymore.
  Please check your site.
  
  Best regards!
  
  This reply was modified 7 years, 11 months ago by Mirela.
- 7 years, 11 months ago tfussell1
  Participant
  
  Expired
  
  Looks great Mihalia! Thank you for your help. You ROCK!!! :)
- 7 years, 11 months ago Mirela
  Participant
  
  Glad to help :)

Viewing 13 reply threads

You must be logged in to reply to this topic.

Community Forums

Site Links

Useful Articles

Login