Why isn't my text responsive on a mobile device view?

Question

I'm currently on a MacBook with the display dimensions of 15.4-inch (2880 x 1800) here is a screenshot of how each section of my website looks for my homepage.

#app (section1)

#section2 (section2)

#section3 (section3)

----------

ISSUE ONE

How can I fix my h3 text to ensure it's responsive on a mobile device and it fits to be seen on a mobile device. Here is a screenshot below of how it looks as you can see it doesn't adjust and fit on the screen correctly. If you look at the JSFIDDLE link to my site at the bottom of the post you can see I have used <div class="col-lg-12"> to ensure it's responsive therefore, no idea why it's going this on mobile devices.

<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
   <span>I'm a</span>
   <span class="cd-words-wrapper">
   <b class="is-visible">Front-End Web Developer</b>
   <b>Graphic Designer</b>
   </span>
</h3>

Here is a screenshot of a mobile device view of my website showing the issue.

JSFIDDLE

Answer 1

white-space: nowrap will prevent the text from wrapping on small screens. Remove that from .cd-words-wrapper b :

 .cd-words-wrapper b {
      display: inline-block;
      position: absolute;
      width: 100%;
      text-align: center;
      left: 0;
      top: 0;
  }

https://jsfiddle.net/wdafatrx/8/

You could also use vw and vmin units to keep them inside the screen.

Answer 2

.cd-words-wrapper b has white-space:nowrap set - this will cause all text inside it to stay on one line. Removing that is the fix to your responsiveness issue.

Answer 3

Use a media call in your css;

    @media screen(max-width: 480px) {
       <!--your div class name--> h3 : <!--new font size--> }