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.
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">
<b class="is-visible">Front-End Web Developer</b>
Here is a screenshot of a mobile device view of my website showing the issue.
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.
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.
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.
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!