Text overflowing on mobile

Site URL: http://www.furkhaniqbal.com

Hello,

I am having troubles with the mobile responsive version of my website where the text overflows on the info page. 

When I mean overflow, I want each word on its own line however it's overflowing across 1 or more. Example attached of desktop and mobile.

Hi @visionsbyfurks

The issue is that you're using a very large font.

An easy fix would be to reduce the font size on mobile, for example by targeting the block and using CSS media queries like so:

@media (max-width: YOURMAXWIDTH) {
  #block-61c8eac2720fa036c70b804d h1 {
    font-size: 22vw;
    white-space: normal!important;
  }
}

I would suggest 22vw as that produces the below result which works well and scales responsively.

And a max-width of 640px. But you may wish to choose a different breakpoint.

I would also consider changing the "white-space" property so that the text correctly centers.

Here's an example of how I achieved the above.

@media (max-width: 640px) {
  #block-61c8eac2720fa036c70b804d h1 {
    font-size: 22vw;
    white-space: normal!important;
  }
}