I am trying to arrange a few images in the personal porfolio website. It looks fine on a large screen. But when I make the screen size smaller the spacing between the images becomes irregular. Like this:
And this is the spacing between two other images:
So as you can see there is irregular spacing. How do I resolve this?Also I don’t want any spacing between my images when the screen size is made small. Here is my code.
<!DOCTYPE HTML>
<html>
<head>
<title>Personal Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<style>
.active{
background-color:white;
}
</style>
<body style="background-color:grey;" data-spy="scroll" data-target=".navbar" data-offset="100">
<!- Navbar-->
<nav class="navbar navbar-toggleable-sm navbar-light fixed-top" style="background-color:purple;">
<a class="navbar-brand" href="#">
<img src="qlip.png" height="30" width="30">
</a>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about"><span style="color:grey;"><strong>ABOUT</strong></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio"><span style="color:grey;"><strong>PORTFOLIO</strong></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact"><span style="color:grey;"><strong>CONTACT</strong></span></a>
</li>
</ul>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div id="about" style="background-color:#99A3A4;padding-top:70px;justify-content:center;" class="container text-center">
<div class="row" style="padding:30px;margin-top:50px;">
<div class="col-xs-12 col-md-7" style="color:white;font-size:20px;">
Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.
<hr style="border:3px solid white;">
Web Developer - User Experience Designer - Graphic Artist
</div>
<div class="col-xs- 12 col-md-4 offset-md-1">
<img class="img-fluid" src="avatar.jpg" height="250" width="250" style="border-radius:50%;margin:auto;">
</div>
</div>
</div>
<div id="portfolio" style="background-color:#F4F6F7;" class="container text-sm-center">
<h2 style="color:grey;padding-top:60px;padding-bottom:20px;"><strong>PORTFOLIO</strong></h2>
<hr style="border:2px solid grey;width:500px;">
<div class="row" style="margin-top:50px;">
<div class="col-xs-12 col-md-6">
<img class="d-block img-fluid img-thumbnail h-75" src="img1.jpg">
</div>
<div class="col-xs-12 col-md-6">
<img class="d-block img-fluid img-thumbnail h-75" src="img2.jpg">
</div>
<div class="col-xs-12 col-md-6">
<img class="d-block img-thumbnail img-fluid h-75" src="img3.jpg">
</div>
<div class="col-xs-12 col-md-6">
<img class="d-block img-thumbnail img-fluid h-75" src="img4.jpg">
</div>
<div class="col-xs-12 col-md-6">
<img class="d-block img-thumbnail img-fluid h-50" src="img5.jpg">
</div>
<div class="col-xs-12 col-md-6">
<img class="d-block img-thumbnail img-fluid h-50" src="img6.jpg">
</div>
</div>
</div>
</body>
</html>