Large text not showing on mobile properly

Beaver Builder
1

Hi

Please can you you tell me why the text on these page goes of the screen on a mobile device. (Same thing happens on reducing the browser on my pc)

http://www.focusma.co.uk/women/

At the bottom of the page:-

“THERE IS NO OTHER MARTIAL ARTS FACILITY LIKE THIS IN CHELMSFORD”

Also here
http://www.communitywhitecollarboxing.co.uk/

8 WEEKS OF PROFESSIONAL
BOXING TRAINING

Thanks!

2

Hey Brian,

The words are being joined by non breaking spaces  , so the browser doesn’t break them. Try deleting the spaces and add them again manually by hitting the space bar.

This is usually caused by copying and pasting text from another source which supports special characters. Check screenshot below for reference. :slight_smile:
http://imgur.com/pgaUnQl

Edit: Same is true for the other site.

Ben

3

Thanks for your answer.

I have deleted the text and replaced it, now the L is going of the screen.

I’m not good with code so cant see the problem.

Any more help is appreciated.

4

Hey Brian,

I’d just chime in here. I’ve just checked this Website http://www.communitywhitecollarboxing.co.uk/ and I realized that the word “PROFESSIONAL” is too large to fit on a mobile screen and that causes the white space on the right side. I’d suggest using a Heading Module to insert your texts there and set a custom font size for the Mobile Structure. Doing this will allow you to display different texts size on mobile screens. I’ve attached a few screenshots below for your reference. Let us know how it goes. :slight_smile:

http://imgur.com/a/3ckjn

Thanks!

KC

5

This seems to work fine, thanks!

6

Hey Brian,

Glad that worked for you, enjoy BB and let us know if you need anything further! :slight_smile:

Thanks!

KC

7

Sorry to comeback again.

I’m having the same problems with the social icons at the top of the page here http://www.focusma.co.uk/ when i view on mobile.

I dont know why this is happening can anyone help please?

8

Hey Brian,

Try the CSS snippet below and see if it fixes the issue there. Let us know how it goes. :slight_smile:

.fl-page-header-primary.fl-page-nav-bottom .fl-page-header-content .fl-social-icons {    
    width: auto;
}

Thanks!

KC

9

Fixed it no problem.

Thanks KC but can you tell me why it has done that in the first place please?

10

Hey Brian,

Glad that worked for you. If I’m not mistaken, do you have this CSS snippet below in your Custom CSS? Maybe it is used somewhere within your site and that’s what causing the issue there. Let us know if you need anything further. :slight_smile:

.fl-page-nav-bottom .fl-page-header-content .fl-social-icons {
    height: 54px;
    width: 495px;
}

Thanks!

KC