Questions about making my webpage more responsive - html

Question

I'm doing the web developer course at FreeCodeCamp, and I'm stuck on the task in which I need to make my own portfolio webpage. It needs to be a single-page scroll style webpage with 3 or more sections which can be accessed from the nav bar or by scrolling. So far, I have created a basic layout and have gotten (almost) everything to work. However, someone said that the webpage wasn't properly scaled for higher res screens.
Now, to fix that, I set width and height to 100% for all images in my CSS file. I've used 1920x1080 images, so I assume that might be the issue. Correct me if I'm wrong, but I think using .svg images should help with that. However, that only relates to the images and on desktop. On mobile, the webpage looks very bad and some of the text is covered by the navbar.
So, how would I go about fixing that? I am a beginner, so please excuse me if this is a very basic question.
My code:
$(document).ready(function(){
$('.nav li a').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 750);
return false;
}
}
});
});
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#import url('https://fonts.googleapis.com/css?family=Oswald');
body {
padding-top: 70px;
}
.hello {
padding-top: 70px;
background-image: url("https://images3.alphacoders.com/853/85305.jpg");
background-repeat: no-repeat;
min-height:100%;
min-width:100%;
background-attachment: fixed;
padding-bottom: 100%;
}
.hello h1 {
font-family: Oswald;
text-align: center;
color: white;
font-size: 125px;
}
.hello h3 {
font-family: Oswald;
text-align: center;
color: white;
}
.hello h5 {
font-family: Oswald;
text-align: center;
color: white;
}
.jumbotron {
background-color: grey;
}
#projects {
background-image: url("http://www.caoping8.com/wp-content/uploads/2014/06/popular-landscaping-heavenly-landscape-photography-magazine-pdf-landscape-wildlife-photography-magazine-landscape-photography-magazine-uk-the-landscape-photography-magazine-essential-guide-to-lan.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
min-height:100%;
min-width:100%;
padding-top:100px;
padding-bottom:100%;
}
#projects h2 {
color: #f2f2f2;
font-family: monospace;
text-align: center;
font-size: 15px;
}
.placeholder1 {
padding-left: 150px;
align: left;
}
.placeholder2 {
padding-right: 150px;
align: center;
}
.placeholder3 {
padding-right: 150px;
align: right;
}
#about {
background-image: url("https://i.ytimg.com/vi/n-9ZLWnFbOI/maxresdefault.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
min-height:1000px;
width: 100%;
padding-top: 30px;
}
.infoLeft {
color: white;
font-family: Oswald;
padding-left: 17px;
text-align: left;
}
.infoRight {
color: #000;
font-family: Oswald;
padding-right: 17px;
text-align: right;
}
.infoCenter {
color: #000;
font-family: monospace;
text-align: center;
padding-top: 25px;
font-size: 15px;
}
#contact {
background-image: url('http://res.cloudinary.com/aninternetuser/image/upload/v1463674617/full_hd_nature_wallpapers_1080p_desktop_river_and_autumn_forest_d1dest.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
width: 100%;
padding-bottom: 100%;
}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Krunal Rindani</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="hello" id="home">
<h1></h1>
<h1></h1>
<h1>Hello.</h1>
<div class="jumbotron">
<h3>This is my portfolio website. You can find my contact details and past work here. You can also learn more about me here!</h3>
<h5>You can navigate through the webpage using the four hyperlinks, or you can scroll.</h5>
</div> <!-- end Jumbotron -->
</div> <!-- end Home -->
<div id="projects">
<h2>This area will be updated with a list of all my projects. This is my first one.</h2>
<div class="row">
<div class="col-xs-6 col-md-3 placeholder1">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder1 -->
<div class ="col-xs-6 col-md-3 placeholder2">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder2 -->
<div class ="col-xs-6 col-md-3 placeholder3">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder3 -->
</div>
</div> <!-- end Projects -->
<div id="about">
<div class="infoLeft">
<h1>About Me:</h1>
</div> <!-- end infoLeft -->
<div class="infoRight">
<h4>I am a teen who loves everything with an engine and is fascinated by technology.</h4>
<h4>I just got done with A Levels and am enjoying the freedom!</h4>
</div> <!-- end infoRight -->
<div class="infoCenter">
<h3>Scroll down or click on Contact on the navigation bar to see the contact options.</h3>
</div> <!-- end infoCenter -->
</div> <!-- end About -->
<div id="contact">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</div> <!-- end Contact -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
This project's CodePen link: http://codepen.io/AnInternetUser/pen/zqVZBL?editors=0010

Answer 1

Try to make your navbar collapsible (and toggleable) in mobile views.
add bootstrap.min.js
change the HTML-code for toggle button by <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
wrap <ul class="nav" ... into <div id="navbar" class="navbar-collapse collapse">
That's my code for your navbar:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Krunal Rindani</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
http://codepen.io/glebkema/pen/GZbaWE