Text wrapping troubleshooting, site-wide when screen smaller in desktop, ipad, various phone sizes

Site URL: http://www.expertparent.co.uk

Having trouble across my site and devices that headings are splitting/breaking/wrapping (not with hyphens though?!). Have tried custom code I found online to reduce heading size but this isn't workable across all platforms. 

Help is very much appreciated!!

Hi,

Can you take some screenshots of problem?

I can but as I said the issue is site wide and happens across different sized screens. screenshot 1 is ipad webpage, screenshot 2 is my husbands iphone. 

9 hours ago, Ashpash1000 said:

I can but as I said the issue is site wide and happens across different sized screens. screenshot 1 is ipad webpage, screenshot 2 is my husbands iphone. 

 

It looks like you we need to use custom code to solve this.

You can add this to Design > Custom CSS

/* Prepartion */
div#block-f6368df725f6c625c447 {
  h3 {
      font-size: 100px;
  }
@media screen and (max-width:991px) {
	h3 {
    font-size: 50px;
}
}
}

Sadly the code doesn't work

23 hours ago, Ashpash1000 said:

Sadly the code doesn't work

Try adding it to top of Custom CSS box

It worked like that on the larger screen iphone but makes the writing really small. It didn't work on the smaller desktop screen. 

On 9/12/2022 at 3:40 AM, Ashpash1000 said:

It worked like that on the larger screen iphone but makes the writing really small. It didn't work on the smaller desktop screen. 

You can add more screen size to the code & adjust the font size value, for eg

/* Prepartion */
div#block-f6368df725f6c625c447 {
  h3 {
      font-size: 100px;
  }
@media screen and (min-width:992px) and (max-width:1300px) {
h3 {
      font-size: 40px;
  }
}
@media screen and (max-width:991px) {
	h3 {
    font-size: 50px;
}
}
}