I am trying to create a website where you can buy some sneakers, when the cart is clicked I want a div showing "your cart is empty" or the number of the items in the cart. my problem is it shows behind the carousel instead of over the carousel. I'm attaching the pictures of how it suppose ti look and how my one looks:
This is my HTL code:
<header>
<div id="header">
<div id="navLogo">
<div id="nav">
<div id="navMenu">
<button type="button" class="btn" data-mdb-toggle="modal" data-mdb-target="#exampleModal">
<image id="navIcon" src="./images/icon-menu.svg"></image></button>
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="nav-menu">
<div class="modal-body">
<button type="button" class="btn" data-mdb-dismiss="modal"><image id="closeImg" src="./images/icon-close.svg"></image></button>
<ul class="nav-list">
<li class="nav-item">
<a class="nav-link" href="#">Collections</a>
<li class="nav-item">
<a class="nav-link" href="#">Men</a>
<li class="nav-item">
<a class="nav-link" href="#">Women</a>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--End Modal-->
</div>
<div id="logo">
<img id="logoImg" src="./images/logo.svg"/>
</div>
</div>
<div id="cartAvatar">
<button id="cartIcon">
<img id="cart" src="./images/icon-cart.svg"/>
<span id="cartIconNumber">0</span>
</button>
<!--CART EMPTY-->
<div class= "cart-Empty">
<div class="cart-Title" >
<h4>Cart</h4>
</div>
<div class="cart-Cont">
<h4> Your cart is empty</h4>
</div>
</div>
<!--CART FULL-->
<div class="cartFull">
<div class="cartContent">
<div class="cart-Title">
<h4>Cart</h4>
</div>
<div class="cart-img">
<img id="imgCart" class='cart-item' src="./images/image-product-1-thumbnail.jpg" class="shopping-cart-image">
</div>
<div class="cart-item">
<div class = "cart-name">
<h6>Autumn Limited Edition...</h6>
</div>
<div class="numbers">
<div class="cart-prize">
<p id="sneakers.prize"> </p>
</div>
<div class="cart-amount">
<p id="quantityFromStorage"></p>
</div>
<div class="cart-total">
<p id="prizeFromStorage"><p>
</div>
<div class="cart-delete">
<button class= "delete" type="button"><img src="./images/icon-delete.svg" class="shopping-cart-image"></button>
</div>
<span id="checkout">Checkout</span>
</div>
</div>
</div>
<!--END FOR CART-->
</header>
<body>
<div id="mainContainer">
<div id="myCarousel">
<div id="fullCarousel">
<!--Carousel wrapper -->
<div id="carouselSneakers" class="carousel slide carousel-slide" data-mdb-ride="carousel">
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/image-product-1.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-2.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-3.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-4.jpg" class="d-block w-100" alt="..." />
</div>
</div>
<!-- Controls -->
<div id="controls">
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselSneakers"
data-mdb-slide="prev" > <img class="controls" src="./images/icon-previous.svg">
</button>
<button class="carousel-control-next" type="button" data-mdb-target="#carouselSneakers"
data-mdb-slide="next"> <img class="controls" src="./images/icon-next.svg">
</button>
</div>
<!--Thumbnails-->
<div class="carousel-indicators">
<button id="imgdes"type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1">
<img src="./images/image-product-1-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="1" aria-label="Slide 2">
<img src="./images/image-product-2-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="2" aria-label="Slide 3">
<img src="./images/image-product-3-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="3" aria-label="Slide 4">
<img src="./images/image-product-4-thumbnail.jpg" class="img-fluid" />
</button>
</div>
</div>
</div>
</div>
<!--Modal carousel-->
<div id="myModal" class="modal-carousel">
<div id=closeModal><img id=closeCarousel src="./images/icon-close.svg"/></div>
</div>
This is my css
/* CART EMPTY */
.cart-Empty{
display:none;
border-radius:30px;
width: 50%;
height:60vh;
width: fit-content;
margin-top: 80px;
z-index: 999;
}
.cart-Title{
border-bottom: solid hsl(0, 0%, 75%);
margin-left:10px;
margin-right: 10px;
width: 200px;
}
.cart-Cont{
color:hsl(0, 0%, 75%);
text-align: center;
padding-top: 25%;
padding-bottom: 25%;
width :200px;
}
/* CART FULL*/
.cartFull{
display: none;
position:absolute;
z-index: 9999;
}
.cartContent{
display: flex;
flex-direction: row;
position:absolute;
margin-top: 20px;
}
#imgCart{
height: 80px;
margin-left: 20px;
border-radius: 10%;
}
.numbers{
display:flex;
flex-direction: row;
}
.cart-item{
display: flex;
flex-direction: column;
margin-left: 20px;
color:hwb(0 75% 25%);
align-items:baseline;
align-content: center;
justify-items: flex-start;
}
.cart-total{
color:black;
width: fit-content;
}
.delete{
margin-left: 40px;
border: none;
background-color: white;
}
#checkout{
margin:20px;
background-color:hsl(26, 100%, 55%);
border-radius: 15px;
border: none;
height: 70px;
color:white;
width:100%;
}
/* CAROUSEL */
.carouselSneakers{
height: 80vh;
border: solid 1px;
width: 30px;
background-color: white;
border-radius: 50px;
padding:8px;
}
.carousel-inner{
position: inherit;
}
.carousel-indicators{
display:none;
}
.controls{
background-color: white;
border-radius: 50px;
padding:8px;
}
And this is my JS code, I know is pure javascript
IS very basic but I'm just starting and learning by myself
cartIcon.addEventListener("click", cartIconClicked)
function cartIconClicked(event){
const buttonClicked = event.target;
cartIconNumber.innerText == 0 ?
cartEmpty.classList.toggle("cart-Empty"): cartFull.classList.toggle("cartFull");
quantityFromStorage = localStorage.getItem('quantity');
prizeFromStorage = localStorage.getItem('prize');
totalPrize.innerText = prizeFromStorage;
squantity.innerText= "X" + quantityFromStorage;
sprize.innerText ="$" + sneakers.prize + ".00";
cartFull
.querySelector('.delete')
.addEventListener('click', removeShoppingItem);
function removeShoppingItem(event){
const buttonDelete = event.target;
cartIconNumber.innerText > 0 ?
cartFull.classList.toggle("cartFull") : null;
cartIconNumber.innerHTML = 0;
cartIconNumber.style.display="none";
}
}
Can someone tell me how can I put the cart on top of the carousel?? thank you!!!
Add z-index:1; in your carouselSneakers CSS class and change z-index from 999 to 3 in your cart-Empty and cartFull class. Hopefully it will work but also try to ask for more help in comments if it's not working.
Related
I'm very new to Javascript so appreciate your help! I created this Owl slider (there are 2 sliders in this code), but want the second carousel to slide in the opposite direction. So the first carousel should slide left to right, and the second from right to left. However, when I add the direction:rtl to the code, it affects both carousels instead of just the bottom one. How can I amend the code so that both carousels slide in opposite directions?
You can view the codepen here --> https://codepen.io/ellie-oop/pen/KKmWLOQ or the code is copied below (HTML, JS, CSS)
Thanks!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flip Carousel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>
<body>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
Javascript
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
center: true,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:false,
responsive:{
0:{
items:1,
nav:false
},
600:{
items:3,
nav:false
},
1000:{
items:3,
nav:false
}
}
})
})
</script>
CSS
*, *:before, *:after{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
body{
font-size: 16px;
}
.main-title{
color: #2d2d2d;
text-align: center;
text-transform: capitalize;
padding: 0.7em 0;
}
.ewmcontainer{
padding: 1em 0;
float: left;
width: 100%;
}
#media screen and (max-width: 640px){
.ewmcontainer{
display: block;
width: 100%;
}
}
#media screen and (min-width: 900px){
.ewmcontainer{
width: 100%;
}
}
.ewmcontainer .title{
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
.ewmcontent {
position: relative;
width: 95%;
max-width: 400px;
margin: auto;
overflow: hidden;
}
.ewmcontent .ewmcontent-overlay {
background: #0070bb;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.ewmcontent:hover .ewmcontent-overlay{
opacity: 0.9!important;
z-index: 1;
}
.content-image{
width: 100%;
}
.content-details {
position: absolute;
z-index: 2;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.ewmcontent:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-top{
top: 20%;
}
You can create one $(document).ready(function() for each carousel, with a unique html element ID (<div id="example-carousel">) so each script call only one single carousel. You can also use unique class names (<div class="example-carousel">) Each carousel can now take in a different configuration object. For example:
$(document).ready(function(){
$("#carousel-top").owlCarousel({
config: etc
}
})
})
$(document).ready(function(){
$("#carousel-bottom").owlCarousel({
config: etc
}
})
})
Hi all this is driving me nuts - I have a load more content button on my site, I had it on my previous site version and it worked absolutely fine. I have only changed the design of my content (I now have cards instead of just clickable images). When I click on the button the screen scrolls but the content is not displayed, I think the problem lies with the way I have the 'div class more' set out, but after trying many different variations I am still only getting the same result. Any thoughts on this would be massively appreciated.
$(document).ready(function() {
$("more").slice(0, 6).show();
$("#LoadMore").on('click', function (e) {
e.preventDefault();
$("more:hidden").slice(0, 6).slideDown();
if ($("more:hidden").length == 0) {
$("#LoadMore").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
// $('#LoadMore').hide();
// document.getElementById('LoadMore').setAttribute("style","display:none");
});
});
#LoadMore {
display: inline-block;
padding: 14px 50px;
font-family: 'Open Sans', serif;
background: #dd0a37;
color: #FFF;
box-shadow: 8px 8px 4px #e8e5e5;
text-transform: uppercase;
border: none;
border-radius: 10px;
-webkit-transition: 0.3s all;
transition: 0.3s all;
}
#LoadMore:hover, #LoadMore:focus {
color: #fff;
background: #112036;
opacity: 0.8;
}
.more {
display:none;
}
/* Float four columns side by side */
.profile-column {
float: left;
width: 16.66%;
padding: 10px 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.profile-column {
width: 50%;
display: block;
margin-bottom: 20px;
}
}
<!-- BUTTON -->
<div class="wrapper">
Ver Mais
</div>
<!--CONTENT I WANT TO LOAD -->
<div class="container">
<div class="row">
<div class="more">
<div class="profile-column">
<div class="profile-card" data-toggle="modal" data-target="#tim-v">
<img src="img/speakers/comp/tim-v.jpg" alt="for salesshaker and lead-results.com" class="img-raised rounded img-fluid image">
<h4 class="profile-title">name</h4>
<p class="profile-company">company</p>
</div>
</div>
</div>
<div class="more">
<div class="profile-column">
<div class="profile-card" data-toggle="modal" data-target="#dr-phil">
<img src="img/speakers/comp/dr-phil.jpg" alt="for salesshaker and lead-results.com" class="img-raised rounded img-fluid image">
<h4 class="profile-title">name</h4>
<p class="profile-company">company</p><br>
</div>
</div>
</div>
<div class="more">
<div class="profile-column">
<div class="profile-card" data-toggle="modal" data-target="#fab-r">
<img src="img/speakers/comp/fab-r.jpg" alt="for salesshaker and lead-results.com" class="img-raised rounded img-fluid image">
<h4 class="profile-title">name</h4>
<p class="profile-company">company</p><br>
</div>
</div>
</div>
<div class="more">
<div class="profile-column">
<div class="profile-card" data-toggle="modal" data-target="#ludo-r">
<img src="img/speakers/comp/ludo.jpg" alt="for salesshaker and lead-results.com" class="img-raised rounded img-fluid image">
<h4 class="profile-title">name</h4>
<p class="profile-company">company</p><br>
</div>
</div>
</div>
<div class="more">
<div class="profile-column">
<div class="profile-card" data-toggle="modal" data-target="#tim-c">
<img src="img/speakers/comp/tim-c.jpg" alt="for salesshaker and lead-results.com" class="img-raised rounded img-fluid image">
<h4 class="profile-title">name</h4>
<p class="profile-company">company</p><br>
</div>
</div>
</div>
<div class="more">
<div class="profile-column">
<div class="profile-card" data-toggle="modal" data-target="#becky-b">
<img src="img/speakers/comp/becky.jpg" alt="for salesshaker and lead-results.com" class="img-raised rounded img-fluid image">
<h4 class="profile-title-r">name</h4>
<p class="profile-company">company</p><br>
</div>
</div>
</div>
</div>
</div>
I've recently started using bootstrap to make a website functioning for both computer and mobile phones/tablets.
While it scales everything nicely in the browser, when I resize my browser window, some words disappear in my interface.
How can I make it so that my text doesn't disappear and stay in their respective rectangles?
I'm running this webpage on a Siemens S7-1200 PLC. I have made a json file that fetches data from the PLC which I represent on my website. When I try it on my phone however, some of the text disappears.
The following Image represents how my page looks like on a web browser on my laptop:
When I resize my browser it looks like the following:
Notice the arrow I've added, the arrow points towards the '1' that is next to the text that says 'Mixer 1'.
Excuse my english, it's not my mother tongue.
My HTML code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- 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" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col" id="ovznormaal">Normaal</div>
<div class="col" id="ovzengsave">Energy Save</div>
<div class="col" id="ovzhyg">Hygieniseren</div>
<div class="col" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col" id="mix1">Mixer 1</div>
<div class="col" id="mix2">Mixer 2 (EC100)</div>
<div class="col" id="ventil">Ventilator</div>
<div class="col" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col">Product Temperatuur</div>
<div class="col"><p id="prodTemp">000.0 C</p></div>
<div class="col">Mat 1 Temperatuur</div>
<div class="col"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col">Mat 2 Temperatuur</div>
<div class="col"><p id="m2temp">000.0 C</p></div>
<div class="col">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col">Verwarming Matten</div>
<div id="mt1" class="col">Mat 1</div>
<div id="mt2" class="col">Mat 2</div>
<div id="mt3"class="col">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col">Programma Keuze</div>
<div id="kort" class="col"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col">Operationele stand</div>
<div class="col">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/js/bootstrap4-toggle.min.js"></script>
<script type="text/javascript" src="js/custom/main.js"></script>
</body>
</html>
My CSS:
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
I hope someone can give my some tips, I'm kind of a beginner to CSS/HTML/JS.
Your <DIV> text is wrapping into the box below it, add white-space: nowrap to your CSS for the DIVs under .col {} and .col-pixel-width-100 {}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
white-space: nowrap;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
white-space: nowrap;
}
You could also try adding the "text-nowrap" class. That is a bootsrtap class that will essentially do the same as what Bob Dole has suggested above
you can simply provide a new class to all the required columns. Here i have edited the code for you
HTML PART
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- 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" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col newclass" id="ovznormaal">Normaal</div>
<div class="col newclass" id="ovzengsave">Energy Save</div>
<div class="col newclass" id="ovzhyg">Hygieniseren</div>
<div class="col newclass" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col newclass" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col newclass" id="mix1">Mixer 1</div>
<div class="col newclass" id="mix2">Mixer 2 (EC100)</div>
<div class="col newclass" id="ventil">Ventilator</div>
<div class="col newclass" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col newclass">Product Temperatuur</div>
<div class="col newclass"><p id="prodTemp">000.0 C</p></div>
<div class="col newclass">Mat 1 Temperatuur</div>
<div class="col newclass"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col newclass">Mat 2 Temperatuur</div>
<div class="col newclass"><p id="m2temp">000.0 C</p></div>
<div class="col newclass">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col newclass">Verwarming Matten</div>
<div id="mt1" class="col newclass">Mat 1</div>
<div id="mt2" class="col newclass">Mat 2</div>
<div id="mt3"class="col newclass">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col newclass">Programma Keuze</div>
<div id="kort" class="col newclass"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col newclass"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col newclass">Operationele stand</div>
<div class="col newclass">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS PART
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
.newclass {
min-width: 300px;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
PS I have added a new class named "newclass" and provided a min width....please change the min-width as you like
I think your issue lies with using line-height as a vertical align, as when the text wraps, it wraps with 98px of line-height.
I would start by removing it and re-aligning it with padding etc.
I want to be able to have a carousel with the div's inside centered with a stroller.
Here are the images:
This is what I currently have:
I would love to center those two boxes within the arrows:
I want the arrows to slide between the three boxes: Right arrow: From 2 -> 3 -> 1 etc.
Here is the code:
$('#carousel-example-generic').carousel({
wrap: true,
interval: false
});
.carousel.slide img {
width: 100%;
height: auto;
}
.carousel img {
border-radius: 0px;
}
.carousel-control.left,
.carousel-control.right {
background: none;
color: #red;
border: none;
}
.carousel-control.left {
margin-left: -45px;
color: black;
}
.carousel-control.right {
margin-right: -45px;
color: black;
}
/* DIV BOXES */
.bottomFarLeftBox {
height: 170px;
width: 290px;
background-color: #4B92DB;
float: left;
clear: none;
}
.bottomMidLeftBox {
height: 170px;
width: 290px;
margin-right: 60px;
background-color: #4B92DB;
float: right;
clear: none;
}
.bottomRightBox {
height: 170px;
width: 310px;
}
.row img {
padding-bottom: 5px;
}
#topLeftColumn {
padding-right: 30px;
}
#bottomLeftColumn {
padding-left: 0px;
}
#bottomRightColumn {
padding-right: 0px;
}
#bottomContactsRow {
display: inline-flex;
}
<div class="col-sm-8">
<h4>Latest Training Documentation</h4>
<hr style="margin-top: 10px;" />
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" class="active"></li>
<!-- data-slide-to="0" -->
<!-- UPDATE ON 3+ SLIDES -->
<!-- <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li> -->
</ol>
<div class="carousel-inner">
<!-- Slide -->
<div class="item active">
<div class="row">
<div class="col-md-6">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 60px!important; padding-bottom: 5px; padding-right: 6px; vertical-align: middle;" />OneDrive</h2>
<p id="innerBoxText">Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
</div>
</a>
</div>
<div class="col-md-6">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/delveLogo.png" style="height: 50px!important; width: 50px!important; padding-bottom: 5px; padding-right: 8px; vertical-align: middle;" />Delve</h2>
<p id="innerBoxText">It's more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
</div>
</a>
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Now you have it
<!doctype html>
<html>
<head>
<title></title>
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel.slide img {
width:100%;
height:auto;
}
.carousel img {
border-radius: 0px;
}
.carousel-control.left, .carousel-control.right {
background: none;
color: #red;
border: none;
}
.carousel-control.left {color: black;}
.carousel-control.right {color: black;}
/* DIV BOXES */
.bottomFarLeftBox {
height: 170px;
width: 95%;
margin-left: 5%;
background-color: #4B92DB;
float: left;
clear: none;
}
.bottomMidLeftBox {
height: 170px;
width: 95%;
margin-right: 5%;
background-color: #4B92DB;
float: right;
clear: none;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
width: 70%;
height: 200px;
margin: auto;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>It's more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am second</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am second of second</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am the third</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am the third of third</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
I use bootstrap wells to resemble cards. I currently have two different types of cards, the "normal" ones which will be in the middle of the screen, and the "special" ones which will be on the left and right side.
Template I'm trying to replicate:
Issues:
1.) It seems like the wells in bootstrap don't want to go to the very left or right of a page. They seem to always be contained in an invisible div/border and won't go anywhere else unless absolute positioning is used. I can't use absolute positioning because the middle content overlaps it if zoomed in. It gets rid of the responsive aspect of bootstrap which needs to stay.
2.) Without the use of absolute positioning, making new "special" cards on the side will add extra vertical space which will sink the middle content down the page
body {
background-color: #5C67B6;
}
html,
body {
height: 100%;
padding-top: 70px;
}
.btn-purple {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -140px;
}
.btn-info {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
right: 10%;
margin-left: 140px;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.customClass {
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.turbo {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well {
min-height: 320px;
max-height: 320px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.well:hover {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well p {
margin-bottom: 50px;
}
.header {
display: inline-block;
width: 100%;
border: 1px solid red;
}
.playerOne {
float: right;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
.playerTwo {
float: left;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
#media only screen and (max-width: 900px) {
.playerOne {
width: 650px;
}
.playerTwo {
width: 633px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="playerOne">
Special Cards
</div>
<div class="playerTwo">
Special Cards
</div>
</div>
<center>
<div class="input-group" style="width: 500px; padding-bottom: 2cm;">
<input type="text" class="form-control" placeholder="Search cards!">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</center>
<div class="content">
<div class="container content-sm customClass">
<div class="row">
<center>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a aria-label="Previous" href="#"><span aria-hidden="true">«</span></a>
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
<a aria-label="Next" href="#"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
</center>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well turbo">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
</div>
</div>
</div>
I've tried using a flexbox and putting the wells in there which seemed to work until i zoomed in and noticed it was no longer responsive and overlapped the other content.
What is the best and most efficient way of adding wells to the left and right side of the page without adding unnecessary whitespace and maintaining responsiveness?
You can try with below example to get the same use col-xx-offset-xx bootstrap's classes
I posted a working example
You can use container-fluid instead of container.
.box {
border: 1px solid;
width: 100%;
height: 100px;
margin: 0px 0px 10px 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
</div>
Working codepen - codepen
I've no idea how to do it with fixed sizes, css is hard.
body {
padding-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">header row</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-lg-6">
<div class="well">
sample text
</div>
<div class="row">
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>