My bootstrap modal is open by default / broken - html

I am an inexperienced developer who is having some issues with a bootstrap modal that should slide down the full width of the page when clicking on the 'Info' button. It was working fine until a few days ago but i'm not sure what has caused this issue. I am in the process of learning git so in future I can revert back to previous versions.
Here is the site: deannoble.com.au
This is the button that should open up the modal:
<span onclick="openNav()">
<button type="button" data-toggle="modal" data-target=".bd-example-modal-xl">
<a class="btn btn-primary" class="closebtn" onclick="closeNav()" href="../website/index.html" href="javascript:void(0)" data-toggle="modal" data-target=".bd-example-modal-xl">Info</a>
</button>
</span>
This is the content within the modal:
<div class="container over" href="javascript:void(0)" class="closebtn" onclick="closeNav()">
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="row d-flex justify-content-center">
<div class="col-lg-8">
<h2 class="overlay-text">Hello 👋 </h2>
<h2 class="overlay-text">I'm a Melbourne-based UX/UI designer and also a pretty decent amateur baker.</h2>
</div>
</div>
</div>
</div>
</div>
And this is the CSS
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgba(205, 178, 255, 0.95);
overflow-y: hidden;
transition: 1.2s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
}
.overlay a {
text-decoration: none;
font-size: 2rem;
color: #4e3380;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: black;
}
.overlay .closebtn {
position: absolute;
top: 1rem;
font-size: 2rem;
}
#media screen and (max-height: 450px) {
.overlay {
overflow-y: auto;
}
.overlay a {
font-size: 20px;
}
.overlay .closebtn {
font-size: 2rem;
top: 1rem;
right: 2rem;
}
}
h2.overlay-text {
color: #4e3380;
text-align: left;
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 1rem;
}```
Any help would be great.

The problem is your cache, just delete it and all work.

Related

Why H1 interfering to the navbar in mobile version?

I don't know why my H1 is interfering with navbar in mobile version. When I scroll down my navbar in mobile version, H1 interfering to the navbar and I can't fix this issue. How can I change my code, that it works ?
Image in mobile version is here: https://i.stack.imgur.com/SJ3vi.jpg
Code below:
.banner {
background-image: url('../../../assets/images/natallia-nagorniak-tA3sJ4u09eU-unsplash.jpg');
height: 800px;
background-position: center center;
background-size: 100%;
}
.content {
top: 25%;
left: 5%;
position: absolute;
}
.content h1 {
color: black;
font-size: 3em;
font-weight: bold;
}
.content a {
text-decoration: none;
background-color: var(--primary-color);
color: #fff;
padding: 15px 40px;
border-radius: 5px;
}
.content a:hover {
background-color: #64cff7;
color: #fff;
}
.stepBox {
background-color: #64cff7;
padding: 20px 20px;
border-radius: 5px;
text-align: center;
}
.stepBox h1 {
font-size: 30px;
font-weight: bold;
color: black;
}
.stepBox p {
font-size: 20px;
font-style: italic;
color: #fff;
}
.highlight {
color: var(--primary-color);
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
.cakebox {
padding: 10px 5px;
}
.cakebox img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 5px;
}
.cakebox h1 {
font-size: 18px;
margin-top: 20px;
font-weight: bold;
}
.viewmorebtn {
text-decoration: none;
background-color: #64cff7;
color: #fff;
padding: 10px 10px;
border-radius: 5px;
font-size: 18px;
}
.viewmorebtn i {
padding-left: 5px;
}
#media screen and (max-width:600px) {
.banner {
height: 600px;
}
}
<div class="banner">
<div class="content">
<h1 class="mb-5">Čerstvé koláče <br/> priamo k tvojim dverám</h1>
<a routerLink="menu">Objednaj teraz! <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<!-- step -->
<div class="container mt-5 mb-5">
<h1 class="text-center">Ako získať <span class="highlight">čerstvé koláče</span></h1>
<div class="row mt-3">
<!-- one -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>1</h1>
<p>vyberte koláč</p>
</div>
</div>
<!-- two -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>2</h1>
<p>vyplnte podrobnosti</p>
</div>
</div>
<!-- three -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>3</h1>
<p>doručenie vašej objednávky</p>
</div>
</div>
</div>
</div>
<!-- cakebox -->
<div class="container mt-4 mb-4">
<h1 class="text-center">Obľúbené produkty</h1>
<div class="row">
<div class="col-lg-3 mt-3" *ngFor="let ck of cakeData; index as i">
<div class="cakebox" *ngIf="i<=3">
<img src="{{ck.cakeImg}}" />
<h1>{{ck.cakeName}}</h1>
<p>{{ck.cakePrice | currency:'EUR'}}</p>
</div>
</div>
</div>
<a routerLink="menu" class="viewmorebtn">Zobraziť viac<i class="bi bi-arrow-right"></i></a>
</div>
Thank you for your answers!
.content {
top: 25%;
left: 5%;
position: absolute;
}
The container of the h1 is positioned absolutely. The default z-index is causing it to overlap other elements which have a smaller z-index value.
Setting the z-index of the .content div and navbar may help to solve the problem.
.content {
top: 25%;
left: 5%;
position: absolute;
z-index: 10; /** something smaller than the z-index of the navbar **/
}
.navbar {
...
z-index: 20; /** something bigger than the z-index of .content **/
}

Adding classes to a parent div on click

I have a setup that works similarly to an accordion, but vertical. I would like the add the class "unset" to the "choice" class, also while removing the "expand" and "small" classes.
I've edited the jQuery code to include to say when the card-close class is clicked, choice removes expand and adds class unset, and also if card-close is clicked, choice removes small and adds class unset.
Nothing I have used though has worked and I'm thinking it's because the div is inside the "choice" section.
Any ideas on how to get this to work?
jQuery(document).ready(function() {
jQuery(".card-close").on("click", function() {
jQuery(".choice").removeClass("expand");
jQuery(".choice").addClass("unset");
jQuery(".choice").removeClass("small");
jQuery(".choice").addClass("unset");
});
jQuery(".choice").on("click", function() {
jQuery(".choice").removeClass("expand unset ");
jQuery(".choice").addClass("small");
jQuery(this).removeClass("small");
jQuery(this).addClass("expand");
});
})
.container {
display: flex;
width: 100%;
padding: 0;
}
.choice {
height: 40vw;
box-sizing: border-box;
padding: 0;
overflow: hidden;
float: left;
align-items: center;
transition: width 0.2s;
position: relative;
}
.card-body {
z-index: 9;
}
.card-body h4 {
text-align: center;
font-family: 'Poppins', sans-serif !important;
color: #fff;
font-weight: 700;
opacity: .7;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 3px;
width: max-content;
}
.card-body .card-title {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
}
.expand .card-body .card-title {
left: 56%;
top: 40%;
}
.card-body .card-title .card-open,
.card-body .card-title .card-close {
color: #000;
background-color: #CBE3A9;
width: max-content;
padding: 0 7px;
font-size: 20px;
margin: 0 auto;
}
.card-body .card-title .card-close,
.expand .card-body .card-title .card-open {
display: none;
}
.expand .card-body .card-title .card-close,
.card-body .card-title .card-open {
display: block;
}
.choice .bg-image {
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
filter: blur(6px);
transition: 1s;
z-index: -9;
}
.danger-color .bg-image {
background-color: green;
}
.warning-color .bg-image {
background-color: blue;
}
.success-color .bg-image {
background-color: red;
}
.info-color .bg-image {
background-color: yellow;
}
.choice.expand .bg-image {
filter: blur(0px);
transition: 1s;
z-index: -999;
}
.expand .card-text {
width: 32%;
background-color: #A7D16D;
padding: 2%;
margin: 0 auto;
position: absolute;
left: 57%;
top: 51.9%;
}
.expand .card-body h4 {
opacity: 1;
font-size: 65px;
}
.small .card-body h4 {
font-size: 25px;
}
.expand {
width: 130%;
}
.unset {
width: 25%;
cursor: pointer;
}
.small .card-title h4 {
display: none;
}
.small {
width: 5%;
cursor: pointer;
background-color: #0000006e;
}
.small>.card-body .card-text {
opacity: 0;
}
.unset>div>p {
opacity: 0;
}
.expand>div {
transition-delay: 200ms;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container mt-5 justify-content-center">
<div class="choice unset mx-2 danger-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Strategic</h4>
<p class="card-open">+</p>
<p class="card-close">-</p>
</div>
<!-- Text -->
<p class="card-text">Every FeltonBuford Partners’ insight strategist has worked on the client side. As former leaders of businesses, we can understand the problems our clients face and deliver the level of strategic thinking that leads to true business breakthroughs.</p>
</div>
</div>
<div class="choice unset mx-2 warning-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Experience</h4>
<p class="card-open">+</p>
<p class="card-close">-</p>
</div>
<!-- Text -->
<p class="card-text">For more than two decades, FeltonBuford Partners has been providing powerful insights that lead to transformational growth for our clients. From the beginning, our goal has been to be the kind of research firm we would have wanted to hire when we
were on the client side.</p>
</div>
</div>
<div class="choice unset mx-2 success-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Fearless</h4>
<p class="card-open">+</p>
<p class="card-close">-</p>
</div>
<!-- Text -->
<p class="card-text">We have earned the reputation for being fearless. Because of our depth of experience, we have the confidence to tackle the toughest and most complex projects across the globe.</p>
</div>
</div>
<div class="choice unset mx-2 info-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Diverse</h4>
<p class="card-open">+</p>
<p class="card-close">-</p>
</div>
<!-- Text -->
<p class="card-text">Our diversity is a true strength. As a minority and women-owned company, we have a unique appreciation of the diversity of the human experience. We can apply our varied talents and perspectives to a broader and more relevant understanding of the
complex world in which we live.</p>
</div>
</div>
</div>
Or you can use stopPropagation in the close event, the event will be stopped before triggering open e.g
jQuery(".card-close").on("click", function(event) {
event.stopPropagation();
jQuery(".choice").removeClass("expand");
jQuery(".choice").addClass("unset");
jQuery(".choice").removeClass("small");
jQuery(".choice").addClass("unset");
});
Read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
Use relative addressing
Something like this - run in full screen
$(document).ready(function() {
$(".card-toggle").on("click", function() {
const $parent = $(this).closest(".choice")
$parent.toggleClass("expand");
$parent.toggleClass("unset");
$parent.toggleClass("small");
$parent.toggleClass("unset");
$(this).text($parent.hasClass("expand") ? "+" : "-")
});
})
.container {
display: flex;
width: 100%;
padding: 0;
}
.choice {
height: 40vw;
box-sizing: border-box;
padding: 0;
overflow: hidden;
float: left;
align-items: center;
transition: width 0.2s;
position: relative;
}
.card-body {
z-index: 9;
}
.card-body h4 {
text-align: center;
font-family: 'Poppins', sans-serif !important;
color: #fff;
font-weight: 700;
opacity: .7;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 3px;
width: max-content;
}
.card-body .card-title {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
}
.expand .card-body .card-title {
left: 56%;
top: 40%;
}
.card-body .card-title .card-open,
.card-body .card-title .card-close {
color: #000;
background-color: #CBE3A9;
width: max-content;
padding: 0 7px;
font-size: 20px;
margin: 0 auto;
}
.card-body .card-title .card-close,
.expand .card-body .card-title .card-open {
display: none;
}
.expand .card-body .card-title .card-close,
.card-body .card-title .card-open {
display: block;
}
.choice .bg-image {
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
filter: blur(6px);
transition: 1s;
z-index: -9;
}
.danger-color .bg-image {
background-color: green;
}
.warning-color .bg-image {
background-color: blue;
}
.success-color .bg-image {
background-color: red;
}
.info-color .bg-image {
background-color: yellow;
}
.choice.expand .bg-image {
filter: blur(0px);
transition: 1s;
z-index: -999;
}
.expand .card-text {
width: 32%;
background-color: #A7D16D;
padding: 2%;
margin: 0 auto;
position: absolute;
left: 57%;
top: 51.9%;
}
.expand .card-body h4 {
opacity: 1;
font-size: 65px;
}
.small .card-body h4 {
font-size: 25px;
}
.expand {
width: 130%;
}
.unset {
width: 25%;
cursor: pointer;
}
.small .card-title h4 {
display: none;
}
.small {
width: 5%;
cursor: pointer;
background-color: #0000006e;
}
.small>.card-body .card-text {
opacity: 0;
}
.unset>div>p {
opacity: 0;
}
.expand>div {
transition-delay: 200ms;
opacity: 1;
}
.card-toggle { font-size: xx-large }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container mt-5 justify-content-center">
<div class="choice unset mx-2 danger-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Strategic</h4>
<p class="card-toggle">-</p>
</div>
<!-- Text -->
<p class="card-text">Every FeltonBuford Partners’ insight strategist has worked on the client side. As former leaders of businesses, we can understand the problems our clients face and deliver the level of strategic thinking that leads to true business breakthroughs.</p>
</div>
</div>
<div class="choice unset mx-2 warning-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Experience</h4>
<p class="card-toggle">-</p>
</div>
<!-- Text -->
<p class="card-text">For more than two decades, FeltonBuford Partners has been providing powerful insights that lead to transformational growth for our clients. From the beginning, our goal has been to be the kind of research firm we would have wanted to hire when we
were on the client side.</p>
</div>
</div>
<div class="choice unset mx-2 success-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Fearless</h4>
<p class="card-toggle">-</p>
</div>
<!-- Text -->
<p class="card-text">We have earned the reputation for being fearless. Because of our depth of experience, we have the confidence to tackle the toughest and most complex projects across the globe.</p>
</div>
</div>
<div class="choice unset mx-2 info-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Diverse</h4>
<p class="card-toggle">-</p>
</div>
<!-- Text -->
<p class="card-text">Our diversity is a true strength. As a minority and women-owned company, we have a unique appreciation of the diversity of the human experience. We can apply our varied talents and perspectives to a broader and more relevant understanding of the
complex world in which we live.</p>
</div>
</div>
</div>

add overlay on image using ::before [duplicate]

This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
I have a post carousel where i am showing archive post .
<div class="col-md-12">
<div class="post--small mb-4">
<img src="assets/images/Layer%2014.png" alt="" class="post__img img-fluid mr-2">
<div class="post__body">
<a class="post__title post__title--small text-capitalize mb-3 text-white">
Ahmedabad Investor CampFinal Disscusion
</a>
<p class="post__date post__date--small text-uppercase">29 may 2019</p>
</div>
</div>
</div>
and CSS
.post__title, .post:link, .post:visited {
font-size: 18px;
font-weight: 500;
color: #fff;
cursor: pointer;
display: block;
}
.post__img {
position: relative;
}
.post__img::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, .8);
}
.post__date {
font-size: 12px;
font-weight: 400;
color: white;
}
.post--small {
display: flex;
}
.post--small .post__img {
width: 119px;
}
I am trying to achieve overlay on images with any extra div , so i used ::before element . I think everything i done is right but this code didn't work .
Please help , Thank you in advance
This is how I usually go about doing an image overlay, I tried to not edit your code too much, hope this helps: https://jsfiddle.net/jbgvaqtx/23/
HTML
<div class="col-md-12">
<div class="post--small mb-4">
<img src="https://picsum.photos/seed/picsum/200/300" alt="" class="post__img img-fluid mr-2">
<div class="post__body">
<a class="post__title post__title--small text-capitalize mb-3 text-white">Ahmedabad Investor CampFinal Disscusion</a>
<p class="post__date post__date--small text-uppercase">29 may 2019</p>
</div>
</div>
</div>
CSS
.post__title,
.post:link,
.post:visited {
display: block;
font-size: 18px;
font-weight: 500;
color: #fff;
cursor: pointer;
}
.post__img {
position: absolute;
cursor: pointer;
height: 10)%;
width: 100%;
pointer-events: all;
}
.post__img:hover ~ .post__body{
opacity: 1 !important;
}
.post__body{
position: relative;
display: block;
top: 0px;
left: 0px;
height: 100%;
width: 119px;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
}
.post__date {
font-size: 12px;
font-weight: 400;
color: white;
}
.post--small {
display: flex;
}
.post--small .post__img {
width: 119px;
}
Pseudo element like :before and :after not work with img tag in all browsers as answered here already https://stackoverflow.com/a/5843078/11719787
Try adding overlay with div tag
//Html
<div class="img-cont">
<img src="https://via.placeholder.com/150" alt="" class="post__img img-fluid mr-2">
<div class="image-overlay"></div>
</div>
//CSS
.img-cont {
position: relative;
}
.image-overlay {
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, .8);
}

how to create a fullscreen overlay menu?

I am trying to make a full-screen menu with two sides, one side has a list of items; Home, Services, Portfolio and the other side will show an image on item hover. For example, if mouse hover on Services, a new image shows up and so.
This is what I need:
But, this is what I have so far:
Another example of what I'm trying to do is this website
Any help pleaseee??
Thanks,
PS: Hide the image in mobile.
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: $dkgreen;
background-color: $dkgreen;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
/* top: 25%;*/
width: 100%;
text-align: center;
* margin-top: 30px;
*/
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
z-index: 1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<nav class=" navbar navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="./img/maduro-logo.png" class="img-fluid" width="115" /></a>
<button class="navbar-toggler custom-toggler" type="button" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div id="myNav" class="overlay">
<div class="row overlay-content">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
<div class="col-sm-5">
<a style="color: #fff;" id="" class="" href="index.php">Home</a>
<a style="color: #fff;" id="" class="" href="services.php">Services</a>
<a style="color: #fff;" id="" class="" href="portfolio.php">Portfolio</a>
<a style="color: #fff;" id="" class="" href="clients.php">Clients</a>
<a style="color: #fff;" id="" class="" href="contact.php">Contact</a>
</div>
<div class="col-sm-7">
<img class="img-fluid" src="img/a.jpg">
</div>
</div>
</div>
Edit:
$('#home').hover(function() {
$('.change-img').css({
"background-image": "url('https://www.ryanhomes.com/rh-community-gallery-NewAspectRatio/7ac519ed-9b29-47b0-a489-ded2da8b770f/db/7ac519ed-9b29-47b0-a489-ded2da8b770f.jpg')"
});
});
$('#services').hover(function() {
$('.change-img').css({
"background-image": "url('https://www.starwebcreations.com/new_images/services.jpg')"
});
});
$('#portfolio').hover(function() {
$('.change-img').css({
"background-image": "url('https://www.ryanhomes.com/rh-community-gallery-NewAspectRatio/7ac519ed-9b29-47b0-a489-ded2da8b770f/db/7ac519ed-9b29-47b0-a489-ded2da8b770f.jpg')"
});
});
$('#clients').hover(function() {
$('.change-img').css({
"background-image": "url('https://www.starwebcreations.com/new_images/services.jpg')"
});
});
$('#contact').hover(function() {
$('.change-img').css({
"background-image": "url('https://www.ryanhomes.com/rh-community-gallery-NewAspectRatio/7ac519ed-9b29-47b0-a489-ded2da8b770f/db/7ac519ed-9b29-47b0-a489-ded2da8b770f.jpg')"
});
});
.side-bar {
width: 50vw;
background-color: #ddd;
height: 100vh;
position: fixed;
top: 0;
left: 0;
bottom: 0;
}
.side-bar>ul {
list-style-type: none;
}
.side-bar>ul>li {
text-align: center;
padding: 15px 0;
cursor: pointer;
}
.img-sec {
width: 50vw;
background-color: #333;
height: 100vh;
position: fixed;
top: 0;
right: 0;
bottom: 0;
}
.change-img {
width: 100%;
max-height: 100%;
background-size: cover;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="side-bar">
<ul>
<li id="home">Home</li>
<li id="services">Services</li>
<li id="portfolio">Portfolio</li>
<li id="clients">Clients</li>
<li id="contact">Contacts</li>
</ul>
</div>
<div class="img-sec">
<div class="change-img"></div>
</div>
</div>

Positioning elements inside bootstrap carousel

I'm trying to put a down chevron to my carousel but the chevron appears outside of the carousel container. I want to have something like this :
http://www.yummygum.com
my HTML code:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-rounded" src="images/biz%20bznner.png" alt="First slide">
<div class="container ccontainers">
<div class="carousel-caption">
<h1 class="animated rubberBand 1">You have a project? Let Us Do it for you</h1>
<h3 class="animated bounceInLeft">We will do your projects with the best prices</h3>
<p><a class="btn btn-lg btn-primary animated shake 1" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
</div>
<a class="chevron-down" href="#myCarousel" role="button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden"true"></span>
</a>
</div>
my CSS:
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.carousel .item {
height: 100vh;
margin-bottom: 60px;
}
.carousel {
height: 100vh;
width:100%;
}
.carousel-caption {
z-index: 10;
margin-top: 0%;
margin-bottom: 5%;
}
.carousel-caption h3 {
padding: 0.5em;
animation-delay: 0.5s;
}
.chevron-down{
**margin-bottom:100px** //THIS DOES NOT WORK
margin-left: 50%;
font-size: 30px;
}
.carousel-caption a{
background-color: orangered;
border-color: darkred;
margin-top: 1em;
animation-delay: 2s;
}
.carousel-caption h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
animation-delay: 0s;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100vh;
}
so in the .chevron-down class margin left works but when I try to vertically move the chevron it does not do anything.. what is the correct way of doing this?
You can do something like this:
.chevron-down {
font-size: 30px;
position: relative;
bottom: 100px;
}
CODEPEN