Adding non transparent text into semi transparent div container? - html

I am trying to add text using a <p> tag inside of 4 black boxes using tags that are semi-transparent. I want the text inside of the container to NOT be transparent at all.
I know from what I've read that this an annoying set-back with CSS. I have seen options to use rgba() colors for the background, or using a .png image. I have tried the rgba() method on the parent container and that didn't work.
I don't really want to have to use an image due to it adding to load time due to the image file size. Everything I have tried has not worked. Can somebody give me some advice on how to handle this? Below is my code.
.wrapper {
position: relative;
padding: 0 15px;
}
.responsive-image {
width: 100%;
height: auto;
}
#statement {
position: absolute;
text-align: center;
top: 280px;
left: 300px;
font-size: 50px;
font-weight: bold;
color: #ffffff;
}
.opaque-box {
position: absolute;
top: 670px;
left: 15px;
background: #000000;
opacity: 0.4;
text-align: center;
width: 25%;
height: 30%;
border-top: solid 2px #ffffff;
border-bottom: solid 2px #ffffff;
}
p.box-content {
padding-top: 50px;
color: white;
font-size: 20px;
font-style: italic;
font-weight: bold;
position: relative;
}
.nav-item>a {
color: #000000;
font-weight: bold;
}
.nav-wrapper {
position: absolute;
right: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="nav-wrapper">
<nav class="navbar navbar-static-top">
<!--Navbar-->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
SHOWROOM
</li>
<li class="nav-item">
SERVICES
</li>
<li class="nav-item">
INFO
</li>
<li class="nav-item">
PHOTO GALLERY
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<img class="responsive-image" src="https://lh3.google.com/u/1/d/0B0DSNKIQ7ncnRDNNQUgwWk1tVXc=w1366-h653-iv1">
</div>
</nav>
<div class="opaque-box">
<div>
<p class="box-content">NEW <br>INVENTORY</p>
</div>
</div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>


Here is what I found worked for me. I had to use top, and left properties to direct the text into the Below is the code that is a suitable solution. I'm sure there is a much cleaner way to do this but I'm not aware of it at this point.
.wrapper {
position: relative;
padding: 0 15px;
}
.responsive-image {
width: 100%;
height: auto;
}
#statement {
position: absolute;
text-align: center;
top: 280px;
left: 300px;
font-size: 50px;
font-weight: bold;
color: #ffffff;
}
.opaque-box {
z-index: 1;
position: absolute;
top: 670px;
left: 15px;
background: #000000;
opacity: 0.4;
width: 325px;
height: 197px;
border-top: solid 2px #ffffff;
border-bottom: solid 2px #ffffff;
}
.box-content {
text-align: center;
z-index: 2;
padding-top: 50px;
color: #ffffff;
font-size: 20px;
font-style: italic;
font-weight: bold;
position: relative;
top: -380px;
left: -500px;;
}
.nav-item > a {
color: #000000;
font-weight: bold;
}
.nav-wrapper {
position:absolute;
right: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="nav-wrapper">
<nav class="navbar navbar-static-top">
<!--Navbar-->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
SHOWROOM
</li>
<li class="nav-item">
SERVICES
</li>
<li class="nav-item">
INFO
</li>
<li class="nav-item">
PHOTO GALLERY
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<img class="responsive-image" src="https://lh3.google.com/u/1/d/0B0DSNKIQ7ncnRDNNQUgwWk1tVXc=w1366-h653-iv1">
</div>
</nav>
<div class="opaque-box"></div>
<p class="box-content">NEW <br>INVENTORY</p>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Related

When I resize my website the webpage doesn't fit in well

my webpage at 595px
I'm using HTML, SASS & Bootstrap for the website. I've included the source code of the hero section. It worked perfectly fine until I started to look at the responsiveness. The webpage seems to get smaller than the actual screen size. You can check the screenshots
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Restora</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Medula+One&family=Roboto:wght#300&family=Teko:wght#300&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Stylesheet -->
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/0df7cc894a.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="hero-section">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Restora</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Contact</a>
</li>
</ul>
<ul class="icons">
<i class="fa fa-search fa-2x"></i>
<i class="fa fa-cart-plus fa-2x"></i>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-12 hero-img">
<img src="./restora-bg.png" alt="">
</div>
<div class="col-lg-6 col-12 hero-text">
<h1> <span>Experience</span> <br> The Real Taste</h1>
<div class="line"></div>
<p class="lead">Delicious Food For Every Mood</p>
<button>Order Now</button>
</div>
</div>
</div>
</div>
My CSS:
body {
font-family: 'Teko', sans-serif;
box-sizing: border-box;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
// Navbar
.hero-section {
nav {
padding: 0 50px;
a {
font-size: 24px;
font-family: roboto, sans-serif;
letter-spacing: 1px;
font-weight: 500;
}
li {
padding: 0 10px;
}
.navbar-brand {
font-size: 48px;
font-family: 'Medula One', cursive;
}
.icons {
padding-top: 15px;
}
}
}
// Hero-Section
.hero-section {
letter-spacing: 8px;
.hero-img {
// background: url('restora-bg.png') no-repeat;
// background-size: contain;
width: 100%;
}
.hero-text {
padding: 100px 80px;
#media(max-width: 768px) {
padding: 10px;
}
h1 {
font-size: 6rem;
#media(max-width: 768px) {
font-size: 4rem;
}
}
span {
font-size: 8rem;
font-weight: bold;
#media(max-width: 768px) {
font-size: 6rem;
}
}
p {
font-size: 2rem;
padding-top: 30px;
letter-spacing: 2px;
font-family: roboto, sans-serif;
}
button {
font-size: 1.3rem;
font-weight: 600;
padding: 8px 20px;
letter-spacing: 2px;
font-family: roboto, sans-serif;
background-color: white;
border: 3px solid;
&:hover {
border: 2px solid black;
background-color: rgb(0, 0, 0);
color: white;
}
}
.line {
background-color: rgb(146, 1, 1);
width: 100px;
height: 5px
}
}
}
The website is fitting well up to the screen width gets to 600px. But when I lower the screen size more, the webpage seems to get more and more smaller than the actual screen size.
I've used several methods like using max-width on the image, checking the viewport, using different properties to html & body tags to fill the screen size etc.
Please take some time to help me fix it.
my webpage at 496px

Hey Akib,
The solution looks simple if I'm not wrong, as you've included bootstrap in your project so, just add "img-fluid" or "w-100" class to your img tag.
<img src="./restora-bg.png" class="img-fluid" alt="">

I think it's the image which is causing the problem. By default, images are able to span a width wider than the page.
If you add:
img {
max-width: 100%;
}
To the css, it should fix this.

I think the issue with the image, Try to give it w-100 class
OR try to remove it via the inspector and see if it causing the issue or not

Is it maybe the nav that's being resized?

placing an image in the jumbotron instead of showing the video

Hi I'm trying to get the image to show when on small screens i have managed to do this by using the code from another question however i need the image to sit in the jumbotron without stopping the video being played on screens bigger than 400-500px. would appreciate sine guidance thanks in advance. i have tried to add a code pen sadly it wont work for me. i have added a screen shot showing what happens hope this helps.
jum image
body {
margin-top: 190px;
font-size: 2.9vmin;
}
h1 {
font-size: 4.5vmin;
}
h2 {
font-size: 4.5vmin;
}
h3 {
font-size: 4.5vmin;
}
.display-3 {
font-size: 6.5vmin
}
.display-4 {
font-size: 6.5vmin
}
.navbar {
box-shadow: 2px 2px 5px #663735;
opacity: 0.9;
background: #fff;
}
.navbar .nav-item {
font-size: 1.1rem;
}
img.logo {
padding-top: 0px;
padding-bottom: 30px;
width: 300px;
height: 180px;
}
.jumbotron {
position: relative;
overflow: hidden;
background-color: black;
opacity: 0.7;
background-size: cover;
min-width: 0;
}
.jumbotron video {
position: absolute;
z-index: 1;
top: 0;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
/* object-fit is not supported on IE */
object-fit: cover;
opacity: 0.5;
}
.jumbotron .container {
z-index: 2;
position: relative;
}
#jumbotron-bg {
display: none;
}
#video video {
width: 100%;
}
#media (max-width: 500px) {
#video {
display: none;
}
#jumbotron-bg {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="/bootstrap.css">
<link rel="stylesheet" href="/style.css">
<title>Law City | Home Page</title>
</head>
<section>
<body id="home" data-spy="scroll" data-target="#main-nav">
<nav class="navbar navbar-expand-md navbar-light fixed-top py-0" id="main-nav">
<div class="container">
<a href="index.html" class="navbar-brand">
<img src="LogoTransparent (1).png" class="logo">
<h3 class="d-inline align-middle"></h3>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Manifesto
</li>
<li class="nav-item">
Blog
</li>
<li class="nav-item">
Opportunities
</li>
<li class="nav-item">
Events
</li>
<li class="nav-item">
Gallery
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
</section>
<Section>
<div class="jumbotron jumbotron-fluid container-fluid" style="align-items: center;">
<div class="overlay"></div>
<div class="inner">
<div id="video">
<video autoplay muted loop poster="#">
<source src="/thecity.mp4" type="video/mp4"/>
</video>
</div>
<div class="container text-white py-3">
<h1 class="display-3">LAW CITY</h1>
<p class="lead">Connecting future lawyers with the legal sector in the city of London</p>
<div>
<ul class="social_Jumbotron_ul">
<li><i class="fab fa-facebook-f" style="color: black;"></i></li>
<li><i class="fab fa-twitter" style="color: black;"></i></li>
<li><i class="fab fa-linkedin" style="color: black; "></i></li>
<li><i class="fab fa-instagram" style="color: black;"></i></li>
</ul>
</div>
</div>
<hr class="my-4">
</div>
<!-- /.container -->
<div id="jumbotron-bg">
<img src="citylon.jpg">
</div>
</div>
<!-- /.jumbotron -->
</Section>

turns out i managed to solve it by playing round in CSS!! yeeh!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="/bootstrap.css">
<link rel="stylesheet" href="/style.css">
<title>Law City | Home Page</title>
</head>
<section>
<body id="home" data-spy="scroll" data-target="#main-nav">
<nav class="navbar navbar-expand-md navbar-light fixed-top py-0" id="main-nav">
<div class="container">
<a href="index.html" class="navbar-brand" >
<img src="LogoTransparent (1).png" class="logo">
<h3 class="d-inline align-middle"></h3>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Manifesto
</li>
<li class="nav-item">
Blog
</li>
<li class="nav-item">
Opportunities
</li>
<li class="nav-item">
Events
</li>
<li class="nav-item">
Gallery
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
</section>
<Section>
<div class="jumbotron jumbotron-fluid container-fluid" style="align-items: center;">
<div id="jumbotron-bg">
<img src="citylon.jpg">
</div>
<div class="overlay"></div>
<div class="inner">
<div id="video">
<video autoplay muted loop poster="#">
<source src="/thecity.mp4" type="video/mp4"/>
</video>
</div>
<div class="container text-white py-3" >
body {
margin-top: 190px;
font-size: 2.9vmin;
}
h1 {
font-size: 4.5vmin;
}
h2 {
font-size: 4.5vmin;}
h3 {
font-size: 4.5vmin;}
.display-3 {font-size: 6.5vmin}
.display-4 {font-size: 6.5vmin}
.navbar {
box-shadow: 2px 2px 5px #663735;
opacity: 0.9;
background: #fff; }
.navbar .nav-item {
font-size: 1.1rem;
}
img.logo {
padding-top: 0px;
padding-bottom: 30px;
width: 300px;
height: 180px;
}
.jumbotron {
position: relative;
overflow: hidden;
background-color:black;
opacity:0.7;
background-size: cover;
min-width: 0;
}
.jumbotron video {
position: absolute;
z-index: 1;
top: 0;
min-height: 100%;
min-width: 100%;
width:100%;
height:100%;
/* object-fit is not supported on IE */
object-fit: cover;
opacity:0.5;
}
.jumbotron .container {
z-index: 2;
position: relative;
}
#jumbotron-bg {
display: none;
}
#video video{
width:100%;
}
#media (max-width: 500px) {
#video {
display: none;
}
#jumbotron-bg {
display: block;
position: absolute;
z-index: 1;
top: 0;
min-height: 100%;
min-width: 100%;
width:100%;
height:100%;
/* object-fit is not supported on IE */
object-fit: cover;
opacity:0.5;
}
}

I cant move my div, up? yet i can move it left and right?

I am trying to design a simple website, and I have made a div's with a frosted glass effect, now I can position it left and right yet I can't seem to move it up!? the div in question has the name of product panel.
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
enter code here
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</body>
</html>
Bearing in mind i just started out with web design some help and input is greatly appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
<style>
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
/*
Start of Code - Laxmikant Killekar
*/
body{
overflow-x: hidden;
}
/*
End of Code - Laxmikant Killekar
*/
</style>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>
<!-- Start of Code - Laxmikant Killekar -->
<div class="fluid-container">
<div class="row">
<div class="col-md-6">
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</div>
<div class="col-md-4 pull-right">
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</div>
</div>
</div>
<!--End of Code - Laxmikant Killekar-->
</body>
</html>

here
is the codepen, tell me if it solved your problem
put your
<div class="frosted-glass" id="product-panel">
before<div class="frosted-glass" id="contact-details">

Add top:(value)px to this
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
and you can change position to it
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
enter code here
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</body>
</html>

When you use more than one items in a line, it should satisfy the width proportion
So, give width percentage '%' instead of pixel 'px',
here you can use float:left to include more than one item in a line.
Try to use width in percentage, it is the way most developers use
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:70%;
height: 400px;
text-align:left;
float:left;
}
#contact-details{
width:30%;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
float:left;
}
#details{
text-align: center;
}
enter code here
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</body>
</html>

Need help debugging Bootstrap responsiveness. Cannot get content to scale properly

This is only my second time using Bootstrap in a project. I'm not sure what is causing my page to not be properly responsive. When resizing the view port content shifts out of the containers. I believe it is being caused by improper usage of the Bootstrap col-* and rows classes. Below is the HTML and CSS code.
EDIT: I have recently gone trough and refactored some of the code and found that I did not put rows inside of columns properly.
.wrapper {
position: relative;
padding: 0 15px;
}
.responsive-image {
width: 100%;
height: auto;
}
#statement {
position: absolute;
text-align: center;
top: 280px;
left: 300px;
font-size: 50px;
font-weight: bold;
color: #ffffff;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
top: -215px;
position: relative;
max-width: 96.7vw;
height: 200px;
left: 30px;
top: -340px;
padding-bottom: 50px;
}
a {
color: #ffffff;
}
.search-text {
padding-left: 10px;
float: right;
}
.glyphicon-search {
padding-top: 10px;
padding-left: 30px;
color: black;
}
.search-bar-container {
padding-top: 10px;
background-color: red;
top: -390px;
max-width: 96.7vw;
height: 70px;
left: 31px;
}
.row-eq-height>[class*='col-'] {
position: relative;
display: flex;
flex-direction: column;
text-align: center;
padding-top: 50px;
font-size: 25px;
font-style: italic;
font-weight: bold;
}
.translucent>div {
background-color: rgba(0, 0, 0, 0.5);
border: solid 1px #ffffff;
}
.nav-item>a {
color: #000000;
font-weight: bold;
}
.nav-wrapper {
position: absolute;
right: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="nav-wrapper">
<nav class="navbar navbar-static-top">
<!--Navbar-->
<div class="row">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
SHOWROOM
</li>
<li class="nav-item">
SERVICES
</li>
<li class="nav-item">
INFO
</li>
<li class="nav-item">
PHOTO GALLERY
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="wrapper">
<img class="responsive-image" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2YmRfVmlUaDdZU1E=w1366-h653-iv1" alt="road in the sunset banner">
</div>
<div class="row row-eq-height translucent">
<div class="col-lg-3 col-xs-12 box-color">NEW <br>INVENTORY</div>
<div class="col-lg-3 col-xs-12 box-color">PRE OWNED <br>INVENTORY</div>
<div class="col-lg-3 col-xs-12 box-color">CUSTOMER <br>FABRICATION</div>
<div class="col-lg-3 col-xs-12 box-color">SERVICE <br>DEPARTMENT</div>
</div>
<div class="row">
<div class="col-xs-12 search-bar-container">
<form class="form-inline">
<div class="form-group">
<label><span class="search-text glyphicon glyphicon-search" aria-hidden="true">QUICK SEARCH</span></label>
<input type="text" class="form-control" id="search-manufacturers" placeholder="(All Manufacturers)">
</div>
</form>
</div>
</div>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Refer this Fiddle if you are looking for something like this. In this Fiddle I have updated your code with some structure and CSS changes.

Bootstrap muddling up when resized

How can I alter my code so that resizing keeps everything within the window intact? As seen by the pictures, the text is outside the section when resized. Also, the image drops down in the navbar
any help is appreciated. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Scrolling Nav - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="css/homepage.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<div class="dropdown">
<button onclick="location.href='homenew.html'" class="dropbtn" >WATER</button>
<div class="dropdown-content">
<a class="page-scroll" href="homenew.html#services">OUR MISSION</a>
<a class="page-scroll" href="homenew.html#services">HELP US</a>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="aboutus.html">About us</a>
</li>
<li>
<a class="page-scroll" href="team.html">Our Team</a>
</li>
<li>
<a class="page-scroll" href="volunteering.html">Volunteer</a>
</li>
<li>
<a class="page-scroll" href="contactus.html">Contact</a>
</li>
<li>
<a class="page-scroll" href="donations.html">Donate</a>
</li>
</ul>
<img class="alignright" src="icons/fundraisingbar.png">
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12 ">
</div>s
<div class = "middle">
<h1 class="h1style offwhite">WATER2O</h1>
<h2 class="">mineral water</h2>
</div>
<div class = "middle2 offwhite ">
<h2>H20</h2>
<h3>ALTERING PERCEPTION </h2>
</div>
<div class ="animated bounceIn ">
<img class="arrowsize" src="http://www.under-water.co.uk/imgs/icons/tick-256x256-red.png">
<p class="whitetext">Registered</p>
</div>
</section>
CSS
.icons{
width: 100px;
height: 100px;
}
.iconz{
padding-top: 10px;
}
.icontext{
padding-top: 10px;
font-weight: bold;
}
.fundraise{
padding-top: 40px;
padding-bottom: 40px;
}
.offwhite{
color: #EBE7E0;
}
.donation_amount{
color: red;
}
.icons2{
width: 150px;
height: 150px;
}
.middle2{
padding: 10px;
border: 5px solid gray;
margin: 0;
}
.description_icon{
padding-top: 50px;
font-size: 20px;
font-weight: bold;
text-align: center;
padding-bottom: 50px;
}
.intro-section{
background-color: black;
/*background-image: url(https://i.ytimg.com/vi/9L6Aj0CJCuc/maxresdefault.jpg);*/
}
.main_text{
color: white;
top: 450px;
}
.logofirst{
height: 300px;
width: 450px;
}
.breadtext{
color: white;
padding-top: 120px;
padding-left: 100px;
font-size:75px;
}
.breadtext2{
color: white;
padding-left: 210px;
font-size:30px;
}
.footer1{
padding-bottom: 20px;
padding-top: 10px;
background-color: #f9f9f9;
font-weight: bold;
}
.arrowsize{
height: 100px;
width: 100px;
color: white;
}
.whitetext{
color: white;
font-weight: bold;
}
/* Dropdown Button */
.dropbtn {
background-color: #F8F8F8;
color: 777777;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}

Can you post the CSS you currently have that's effecting the area?
Bootstrap has a feature for progress bars so you won't have to use a static image. You'll be then be able to change the width accordingly for the percentage you need the bar at.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
edit:
Alternatively you can just use #media queries in your CSS to reisze the width of the image dependant on the screen size that is being viewed at.