Why does my website look like this on mobile devices?


#1

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)

enter image description here

#section2 (section2)

enter image description here

#section3 (section3)

enter image description here

ISSUE ONE

How can I fix my h3 text to ensure it’s responsive 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.

enter image description here

ISSUE TWO

Where has my navigation bar gone on my mobile devices? It appears on my computer screen. I have put a screenshot below to show you my navigation bar is missing on mobile devices. Furthermore, I have put the HTML below so you can see if I did anything wrong. The CSS is in the JSFIDDLE linked below with all my site code if you need to see it.

enter image description here

ISSUE THREE

Why does each of my sections appear so close together on my mobile devices when I have set up each section to be one page page size.

I have given them all ID's and have used CSS to make them all one page like also demonstrated in the above screenshots of my MacBook view.

#app,
#section2,
#section3 {
  height: 100vh;
  width: 100%;
}

Screenshot to show how close they are on mobile view which I don’t want, I wanted them to have their own page size view like on my above screenshots on my MacBook.

enter image description here

JSFIDDLE


Please note: If someone can think of a better title of explaining my issues please update my post. I’m still quite new to how stack users would like the structure of the title to look like. Apologies in advance!


#2

As mentioned to you in gitter:

You will need to use media queries to adjust the font size on smaller screens. Bootstrap does some minimal text size adjustments on smaller screens, but for more control, use a media query instead. You seem to have a good grasp on these, as you use them a lot in your CSS already, but here’s a link to them anyway: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Your sections are shorter on mobile because you are using % based sizing - which indicates a percentage of the parent’s size. On mobile screens, things are smaller, so your % based top/bottom padding will cover fewer pixels. Use vh units or pixels and you will see more consistency across different screen sizes.

Your menu disappears when the screen is narrower than 768px because you have put the menu icon in your nav navbar-nav <ul> which is meant to disappear below 768px so a responsive navbar button can be shown instead. Move your icon out of that <ul> and put it where you see the <button> code here: http://getbootstrap.com/components/#navbar-default

Hope that helps.