I've hit a roadblock with this basic webpage (I know it's not the most exciting project, but bear with me). I've been using Bootstrap for years, but now my manager wants it to be mobile-friendly. No matter what I try, I can't seem to get the layout right, especially with a Navbar in the middle like the screenshot below. The width is fine, but setting the height correctly is proving to be a challenge.
https://i.sstatic.net/Mi6Cl.png
On desktop, I attempted a three-column layout that looked alright until I added the middle navbar (it ended up looking bloated and out of place in the background). Moreover, none of the columns are adjusting their heights correctly, so I suspect there might be an issue with the CSS. I experimented with height:auto and height:fixed, but neither provided a perfect solution as shown in the snippet of code below.
https://i.sstatic.net/N3hEB.png
<div class="container">
<div class="row">
<div class="col-sm-5"></div>
<div class="col-sm-2"></div>
<div class="col-sm-5"></div>
</div>
Although I'm using 'col' for layout, I have a feeling I'll be told to switch to flexbox soon.
To add to the complexity, most templates or examples I find only use one image for a full-width background. Dealing with multiple images within the column height is proving to be quite challenging.
.MainBackgroundImages {
padding-bottom: 40%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
Below is a code snippet where you can see the height issue:
.leftHalf {
background-image: url('https://via.placeholder.com/2000/FF0000/FFFFFF/?text=Left');
}
.centerHalf {
background-color: black;
color: white;
text-align: center
}
.rightHalf {
background-image: url('https://via.placeholder.com/2000/FFFF00/00000/?text=right');
}
.MainBackgroundImages {
padding-bottom: 40%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="”clear: both;"></div>
<div class="row">
<div class="col-sm-5 MainBackgroundImages leftHalf"></div>
<div class="col-sm-2 centerHalf">
<br>
<div class="navbar navbar-default" id="custom-bootstrap-menu" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Ishka Sport</a> <button class="navbar-toggle" data-target=".navbar-menubuilder" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/products">kayak</a>
</li>
<li>
<a href="/about-us">Nipper Boards</a>
</li>
<li>
<a href="/contact">Accessories</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-5 MainBackgroundImages rightHalf">
<div class="col-md-12 text-center"></div>
</div>
</div>