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.
Related
I am fairly new to coding and have a specific issue that I cannot figure out. I have a container that I want positioned differently based on the screen size. For large and mid-sized screens, I want the container left justified with a small amount of padding from the left edge, and on small screens, I want the container centered. I am using bootstraps, html, and css. See my style and code below. The container is overtop of a background image.
<!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" />
<title>Website Name</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
</head>
<style>
#media (min-width: 100%) {
#intro {
min-width: 100%;
margin-right: none;
margin-top: -58.59px;
background-color: none;
}
}
.alfa {
position: absolute;
max-width: inherit;
margin-top: 55vh;
align-items: center;
justify-content: center;
background-color: white;
color: black;
border: lightgrey;
border-style: solid;
border-width: thin;
border-radius: 0em;
font-size: 1em;
padding: 1rem 1rem 1rem 1rem;
box-shadow: 0 0 20px black
}
.no-pad {
margin-right: 0rem;
margin-left: 0rem;
}
.navbar-brand {
margin-left: 1rem;
}
.nav-item {
margin-right: 1rem;
}
.row {
font-size: 1.5em;
}
.main-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
#button1 {
font-size: 1.5em;
}
</style>
<body>
<!-- Header Bar -->
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="">My Accounting Exec</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i title="" class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Services</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Pricing</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">About</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- Background-Image -->
<container>
<div class="bg-image" style="background-image: url('../MDB5-STANDARD-UI-KIT-Free-3.5.1/img/Accountant.jpg'); height: 89vh;">
<div class="Alert-Box text-center">
<div class="alfa text-center;">
<h5><b>Text Text Text</b></h5>
<div><button id="button1" type="button" class="btn btn-primary">WE ARE HERE FOR YOU!</button></div>
</div>
</div>
</div>
</container>
<!-- Service Links -->
<div class="row no-pad text-center">
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
background-color: lightgrey;
height: 4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(210, 210, 210); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 1</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(180, 180, 180);height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 2</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(160, 160, 160); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 3</b></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center"
style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;"></style>
<button href=""
style="border: none; background-color: rgb(140, 140, 140); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 4</b></a>
</div>
</div>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
Without reading through all of your code, you need proper media queries that establish generalized rules and mobile only rules: ie
.container {
/* CODE TO LEFT ALIGN CONTENT + padding */
}
#media only screen and (max-width: 768px) {
.container {
/* CODE TO CENTER CONTENT*/
}
}
That way you can have generalized rules and target specific screen size treshholds.
Hope that makes sense for you.
Problem: I am designing a page using bootstrap 5/html/css. I made it responsive so with a specific width the boostrap 5 menu with toggler navbar shows. On the rest of the page, I want to add an accordion style menu. I've done tests and I know that there is nothing wrong with the code seperatly, but when I put them both on the same page and I click on the accordion tab to show, the page scrolls back up to the head. I think it has to do with the toggler navbar code, but I'm a student so I don't really know how to solve this so I came to ask you guys for help! Thanks :)
Here is the HTML:
<html lang="en" dir="ltr">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="utf-8">
<title>eyo</title>
<!---CSS BOOTSTRAP--->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!--FONTAWESOME-->
<script src="https://kit.fontawesome.com/9e552d07ce.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- NavBar -->
<nav class="navbar sticky-top navbar-expand-lg">
<div class=" container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon" src=""><i class="fas fa-sort-down fa-3x"></i></span>
</button>
<img src="logo.png" alt="" class=" logo d-inline-block align-top">
<a href=""><i class="user-mobile align-top fas fa-user fa-2x"></i>
</a>
<div class="collapse navbar-collapse justify-content-center" id="navbarTogglerDemo03">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<button class="navbtn btn btn-lg me-2" type="button">Home</button>
</li>
<li class="nav-item">
<button class="navbtn btn btn-lg me-2" type="button">Serviços</button>
</li>
<li class="nav-item">
<button class="navbtn btn btn-lg me-2" type="button">Sobre</button>
</li>
<li class="nav-item">
<button class="navbtn btn btn-lg me-2" type="button">Contato</button>
</li>
<li class="nav-item">
<button class="navbtn btn btn-lg me-2" type="button">Minha Conta</button>
</li>
</ul>
</div>
</ul>
</div>
<a href=""><i class="user-desktop align-top fas fa-user fa-2x"></i>
</nav>
<div id="top">
<div class="thumbnail">
<img class="first" src="first-img.png" alt="">
<div class="caption">
<p class="nossos">Nossos serviços são</p>
<span>inteiramente </span><span style="color:green; background-color: white;">ONLINE</span>
<p class="confira">Confira abaixo!</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
</html>
Here is the CSS:
overflow-x: hidden;
}
/*NAV BAR ELEMENTS*/
.navbar{
background-color: white;
}
.logo{
width: 50px;
height: 44px;
}
.user-desktop{
width: 50px;
height: 44px;
position: relative;
display: inline-block;
background-color: white;
}
.user-mobile{
width: 50px;
height: 44px;
position: relative;
display: inline-block;
background-color: white;
}
.navbtn{
background-color: green;
color: white;
font-weight: 700;
padding: 4px;
margin: 3px;
}
.navbar-toggler-icon{
color: green;
position: relative;
bottom: 30px;
}
.navbar-nav{
position: absolute;
}
/*TOP*/
.first{
display: block;
width: 100%;
}
p{
margin-bottom: 0;
}
.thumbnail {
position: relative;
display: inline-block;
}
.caption {
position: absolute;
top: 56%;
left: 70%;
transform: translate( -50%, -50% );
text-align: left;
color: white;
font-family: Ubuntu-Bold;
font-style: normal;
font-weight: normal;
font-size: 5vw;
color: rgba(255,255,255,1);
white-space: nowrap;
margin-top: -5.449396133422852px;
}
.servicos-title{
font-size: 3em;
text-align: center;
}
.servicos-med{
position: absolute;
background-color: blanchedalmond;
}
#media (min-width:320px) {
.user-desktop{
display: none;
}
}
#media (min-width:481px) {
.user-desktop{
display: none;
}
}
#media (min-width:641px) {
.user-desktop{
display: none;
}
}
#media (min-width:990px) {
.user-mobile{
display: none;
}
.user-desktop{
display: inline-block;
}
}
#media (min-width:1025px) {
.user-mobile{
display: none;
}
.user-desktop{
display: inline-block;
}
}
#media (min-width:1281px) {
.user-mobile{
display: none;
}
.user-desktop{
display: inline-block;
}
}
Been using bootstrap to try and have this section of my web page to display the images properly while shrinking the web page. They stay in line which is good, seems the col / row method with bootstrap really came thru; how can I get these to shrink with the page so that they may stay in formation longer, and look better overall when the web page has shrunk significantly?
the styles
h1 {
font-weight: bold;
font-size: 40px;
background-color: #4aaaa5;
padding: 15px;
color: #ffffff !important;
}
h2 {
font-size: 25px;
Color: #4aaaa5;
padding: 20px 20px 5px 20px;
}
#foot {
border-style: solid;
border-width: 10px 0px 0px 0px;
border-color: #4aaaa5;
padding-top: 20px;
color: #cccccc;
background-color: #666666;
text-align: center;
margin-top: auto;
}
.left {
display: inline-block;
position: relative;
padding: 0px;
margin: 20px;
}
h3{
position: absolute;
bottom: 5px;
font-size: 25px;
background-color: #4aaaa5;
padding: 15px 0px;
width: 100%;
color: #ffffff;
text-align: center;
}
body {
background-image: url("./hotel-wallpaper/hotel-wallpaper.png");
display: flex;
height: 100vh;
flex-direction: column;
}
.main{
display: block;
margin-top: 50px;
margin-bottom: 150px;
padding: 20px 20px 40px 20px;
background-color: #ffffff;
}
.borderr {
border-right: 2px solid #cccccc;
}
hr {
margin: 20px 0px 20px 0;
height: 1px;
border: 0px;
border-top: 3px solid #cccccc;
}
p {
margin-top: 20px;
line-height: 30px;
}
the html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./assets/reset.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/Style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container col-xl-7 col-lg-8 col-md-9 col-sm-10">
<h1 class="navbar-brand"> My Name </h1>
<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 ml-auto">
<li class="nav-item borderr">
<a class="nav-link" href="./index.html"> About me <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active borderr">
<a class="nav-link" href="./portfolio.html">Portfolio</a>
</li>
<li class="nav-nav-link">
<a class="nav-link" href="./contact.html">
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="main container col-xl-7 col-lg-8 col-md-9 col-sm-10">
<h2> Portfolio </h2>
<hr>
<div class="row">
<div class="left">
<img src="https://www.peta.org/wp-content/uploads/2017/05/Kenny-4-602x399.jpg" alt="White Liger" width="100%" height="100%"
style="max-width: 300px; max-height: 200px;">
<h3> liger </h3>
</div>
<div class="left">
<img src="https://twistedsifter.files.wordpress.com/2012/01/savannah_cat_closeup.jpg?w=800&h=507&zoom=2"
alt="Savannah" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3>Savannah</h3>
</div>
<div class="left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/XJ-B1_Beefalo.jpg/1920px-XJ-B1_Beefalo.jpg"
alt="Beefalo" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3> Beefalo </h3>
</div>
<div class="left">
<div class="pic">
<img src="https://shoeuntied.files.wordpress.com/2017/12/rama2.jpg" alt="Cama" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3>Lama camel</h3>
</div>
</div>
<div class="left">
<img src="https://i0.wp.com/metro.co.uk/wp-content/uploads/2018/11/sei_38307333-0b17.jpg?quality=90&strip=all&zoom=1&resize=644%2C471&ssl=1"
alt="Zonkey" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3> Zonkey</h3>
</div>
</div>
</div>
</main>
<footer id="foot">
Copyright ©
</footer>
</body>
</html>
Thanks -
use Col-md-(media-dependent-length) for setting up row div length with image width full to 100%
Check Bootstrap Docs
Add class="img-fluid" to the image tag as :
<img class="img-fluid">
This will make images responsive which therefore shrink and expand based on the window size. Also, setting max-height and max-width as per your code will fix the max size.
But while shrinking the window size, it will reduce the size.
Regarding the images, refer this link from the official documentation of bootstrap.
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>
Whenever i Resize my website it keeps getting messed up, and I have tried everything to fix it but i cant figure it out. I tried bootstrap, but didn't quit understand the meaning of it. I am new so advice is appreciated and Thanks for helping
Regard Hussein M.
body {
color: white;
font-family: sans-serif;
background-repeat: round;
background-image: url(Gaming.jpg);
background-position: -430px -100px;
}
h1 {
font-family: sans-serif;
width: 100%;
height: 100%;
margin: 10px;
padding: 0px;
}
ul {
}
table {
padding-left: 50px;
}
body {
min-width: 800px;
position: relative;
font-family: sans-serif;
}
img {
margin: 0;
position: absolute;
top: 500%;
left: 50%;
margin-right: -50%;
border-color: red;
border-width: medium;
}
#menu1 {
float: left;
padding-left: 25px;
}
#menu2 {
float: right;
padding-right: 50px;
}
.nav {
font-size: 17px;
font-family: inherit;
position: relative;
top: -9px;
padding: 9px 0px 50px 0px;
margin-bottom: 0px;
}
.nav ul,li,a{
display: inline;
padding-left: 10px;
text-decoration: none;
color: rgb(22, 239, 239);
}
.main {
position: absolute;
top: 150px;
left: 5px;
}
.h1z1 {
border-radius: 5px;
border: 1px solid #fff;
margin: 1 auto;
padding: 0px ;
margin-top: 60px;
width: 20%;
text-align: left;
}
.h1z1-img {
border-radius: 5px;
display: inline-block;
}
.h1z1-description {
display: inline-block;
margin-left: -25px;
top: px;
}
.Buy {
text-decoration: underline;
margin-left: -8px;
}
.H1Z1head {
margin: -10px;
margin-left: 40px;
}
.go {
color:aqua;
position: fixed;
top: 190px;
left: 380px;
}
.go {
text-decoration: underline;
font-size: 25px;
}
<!DOCTYPE HTML>
<html>
<head>
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?4aNAebvVIseGLS8uJOO3z9Bsrlfecjl7";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
<title>Gaming Library</title>
<link rel="stylesheet" type="text/css"
href="Stylesheet.css" />
</head>
<body>
<div class="nav">
<ul id="menu1">
<li>Homes</li>
<li>About</li>
<li>Affliates</li>
<li>Donate</li>
</ul>
<ul id="menu2">
<li>Old web</li>
<li>Sign Up</li>
<li>Login</li>
<li>Contact Support</li>
</ul>
</div>
<div class="go">
<h1>Go to feautered games</h1>
</div>
<!-- Næste side
<div class="h1z1">
<div>
<ul>
<h2 class="H1Z1head">H1Z1</h2>
</ul>
<img class="h1z1-img" src="KOTK.jpg" width="250" height="180">
</div>
<div class="h1z1-description">
<ul>
<li>
<p>H1Z1: King of the Kill is a fast-paced shooter in which players compete in large-scale chaotic PvP spectacles of skill, wit and a little luck, where everyone must fight to the death to stand alone at the top of the podium.</p>
<h3 class="Buy">Buy Now only $20.99 </h3>
</li>
</ul>
</div>
</div>
-->
</body>
</html>
Here is a simple example how to get your content responsive with Bootstrap, that you didn't understand. https://jsfiddle.net/qaxhxcb3/1/ (Here u can resize and such)
body {
font-family: 'Montserrat', sans-serif !important;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 14px;
}
.navbar-nav li a:hover {
color: green !important;
}
section h1 {
color: white;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.pink {
background-color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<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="#">Gaming Library</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Homes</li>
<li>About</li>
<li>Donate</li>
<li>Affliates</li>
<li>Support</li>
</ul>
</div>
</div>
</nav>
<!-- First section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-4 green">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 red">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 blue">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
<!-- Second section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-12 pink">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
</body>
</html>
As can you see, you put your content inside the class "container", then "row" after than u choose how you will display your content with the grid system. The Bootstrap grid system allows up to 12 columns across the page.
and the grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
and there is also different columns that decide how it will be displayed on the screen. In the example i got three col-sm-4 and it must always add up to 12 for each row class. In the second section i created there is col-sm-12, and that fill up the whole grid. Hope this helps a litte bit.
But, i suggest you read some Bootstrap tutorials from w3school to get a hang of it.