I'm essentially creating a "sliding-door" animation with the words "HELLO" in the middle, that will split in half as the doors open. The text on the left has letters pushed right up to the edge of the left "door"/div, while the text on the right has a tiny little gap on the left (the "LO!"). I checked with the dev console, and don't see any padding, border, or margin that could be causing this. It's obviously not a big deal, but how can I push the letter "L" in "LO!" flush up against the edge of the div/door container that it's in?
html, body {
height: 100%;
width: 100%; }
.container {
border: 1px solid black; }
.doors {
height: 100vh;
width: 50vw;
border: 1px solid blue;
position: absolute;
display: inline-flex;
align-items: center; }
#left-door {
background-color: #1c1b1a;
left: 0;
transition: all 1s;
justify-content: flex-end; }
#right-door {
background-color: #f9d73e;
right: 0;
transition: all 1s;
justify-content: flex-start; }
.slide-right {
margin-right: -100%; }
.slide-left {
margin-left: -100%; }
.door-text {
font-family: 'Lato', san-serif;
height: 100px;
width: 50%;
font-size: 4em;
line-height: 100px;
font-weight: 900; }
#text-left {
text-align: right;
color: #f9d73e; }
#text-right {
text-align: left;
color: #1c1b1a; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Portfolio</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="./home.css">
</head>
<body>
<div id="left-door" class='doors'>
<h1 id="text-left" class="door-text">HEL</h1>
</div>
<div id="right-door" class='doors'>
<h1 id="text-right" class="door-text">LO!</h1>
</div>
<div class="container">
<h1>this is the body</h1>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="./home.js"></script>
</html>
The letter "L" is taking up it's normal space I think. You could correct the small gap manually with a negative indent, like this: text-indent: -5px;
html, body {
height: 100%;
width: 100%; }
.container {
border: 1px solid black; }
.doors {
height: 100vh;
width: 50vw;
border: 1px solid blue;
position: absolute;
display: inline-flex;
align-items: center; }
#left-door {
background-color: #1c1b1a;
left: 0;
transition: all 1s;
justify-content: flex-end; }
#right-door {
background-color: #f9d73e;
right: 0;
transition: all 1s;
justify-content: flex-start; }
.slide-right {
margin-right: -100%; }
.slide-left {
margin-left: -100%; }
.door-text {
font-family: 'Lato', san-serif;
height: 100px;
width: 50%;
font-size: 4em;
line-height: 100px;
font-weight: 900; }
#text-left {
text-align: right;
color: #f9d73e; }
#text-right {
text-align: left;
color: #1c1b1a;
text-indent: -5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Portfolio</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="./home.css">
</head>
<body>
<div id="left-door" class='doors'>
<h1 id="text-left" class="door-text">HEL</h1>
</div>
<div id="right-door" class='doors'>
<h1 id="text-right" class="door-text">LO!</h1>
</div>
<div class="container">
<h1>this is the body</h1>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="./home.js"></script>
</html>
Related
Can I apply align-self on transition??
As you can see, When I hover to .wrap
div:nth-of-type(2) {
align-self: flex-start;
}
div:nth-of-type(4) {
align-self: flex-end;
}
will change to align-self: flex-center;
I have tried to do transition: All 2s on .wrap div:nth-of-type(2) & .wrap div:nth-of-type(4) but it's not working. I hope to make a slow animation but it seems not working. I have read a post that said Flexbox align-self property not transitioning?. So I can't apply align-self on transition?
.wrap {
height: 300px;
width: 600px;
margin: 0 auto;
}
.wrap div {
height: 100px;
width: 100px;
border: 3px solid black;
background-color: pink;
transition: align-self 9s;
}
.wrap div:nth-of-type(2) {
align-self: flex-start;
}
.wrap div:nth-of-type(4) {
align-self: flex-end;
}
.wrap:hover div {
align-self: center;
}
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>A Great Demo on CodePen</title>
</head>
<body>
<div class="wrap d-flex align-items-center justify-content-md-center">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
consider margin intead since you are using fixed height:
.wrap {
height: 300px;
width: 600px;
margin: 0 auto;
}
.wrap div {
height: 100px;
width: 100px;
border: 3px solid black;
background-color: pink;
transition: margin 1s;
}
.wrap div:nth-of-type(2) {
margin-bottom:200px
}
.wrap div:nth-of-type(4) {
margin-top:200px
}
.wrap:hover div {
margin: 0;
}
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>A Great Demo on CodePen</title>
</head>
<body>
<div class="wrap d-flex align-items-center justify-content-md-center">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
body {
background: white;
font-family: 'Ubuntu', sans-serif;
}
.cas {
display: inline-block;
border: 2px solid #0C8346;
background: #0C8346;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
.sad {
display: inline-block;
border: 2px solid #D73909;
background: #D73909;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
.asd {
display: inline-block;
border: 2px solid #D3D3D3;
background: #D3D3D3;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
p.sda {
font-width: 700;
font-size: 26px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
>.col,
>[class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
.sh {
margin-left: -2px;
width: 585px;
border: 2px solid gray;
border-top: none;
}
.hs {
margin-left: -17px;
width: 587px;
padding-left: 2px;
border: 2px solid gray;
border-top: none;
border-right: none;
margin-right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="dasdasd.css">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="row align-items-center">
<div class="col-6 cas">
CONS
</div>
<div class="col-6 sad">
PROS
</div>
</div>
<div class="row no-gutters">
<div class="col-6">
<input type="input" name="as" class="asd hs">
</div>
<div class="col-6">
<input type="input" name="as" class="asd sh">
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/ulg/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</body>
</html>
I'd like for the input under the cons to start where the cons starts, and to end where it ends now. Is this possible, or should I just make the pros and cons bigger? Or is there a better way to do it? Please help!! Also please go easy on me, I'm a beginner... Thank you so very much!!! Well that's all I want to ask, this is just filler...
please add your styles
input, .title{
width: 100%;
}
input{
background: #D3D3D3;
}
.title--cons{
background: #D73909;
color: #fff;
}
.title--pros{
background: #0C8346;
color: #fff;
}
#pros-cons div[class^='col-']{
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="dasdasd.css">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="container" id="pros-cons">
<div class="row align-items-center">
<div class="col-6">
<div class="title title--cons">
CONS
</div>
</div>
<div class="col-6">
<div class="title title--pros">
PROS
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<input type="input" name="as" class="asd hs">
</div>
<div class="col-6">
<input type="input" name="as" class="asd sh">
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/ulg/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to make stopwatch and I want to put these 3 buttons in a circle but responsive. I have already make a circle that is responsive now I just want to add 3 buttons inside the circle under the timer.
Here is the code: https://jsfiddle.net/obh0mru4/1/
See my result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stop Watch</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container mt-5 h-position-relative">
<div>
<h1 class="title">Stop Watch</h1>
</div>
<div class="circle mt-5">
<div>
<h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="msec" class="circleContent">00</h1>
</div>
</div>
<div class="h-position-absolute h-tl">
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="reset()">Reset</button>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</html>
body {
background: #000428;
background: -webkit-linear-gradient(to right, #004e92, #000428);
background: linear-gradient(to right, #004e92, #000428);
}
.title {
text-align: center;
color: #fff;
}
.circle {
margin: 0 auto;
width: 350px;
height: 350px;
line-height: 320px;
border-radius: 50%;
text-align: center;
border: 10px solid #666;
border-style: double;
}
.circleContent {
display: inline-block;
color: #fff;
font-size: 40px;
width: 60px;
}
.circleContent-span {
color: #fff;
font-size: 40px;
}
.h-position-relative {
position: relative;
}
.h-position-absolute {
position: absolute;
}
.h-tl {
top: smth;
left: smth;
}
You will have to fiddle around with the numbers to get exactly what you want, but this is a start:
.h-tl {
top: 275px;
left: 50%;
transform: translateX(-50%);
}
What it does is place the buttons vertically at 275px.
It also places the left hand side horizontally to the center, but you don't want that so you move it back 50% of it's own width. (This is a common 'trick', you can remove the translate once to see what it exactly does).
This will put your buttons under your digits
There are alot of questions like this on stack but the answers are not fixing my problem, As you can see, I am trying to create this small text over image look by making a background image on the parent div of the texts. Image is not showing due to image doesn't have any height , me giving 100 % height is not working either, quick stack search says give html 100% due to parent should have some height, but me doing that is not solving the issue either . I want some responsive height control , hence why i want to use %. Certainly don't want to use px value
my code
h1, h2, h3, h4, h5, h6 {
font-family: 'Teko', sans-serif;
}
html {
font-size: 18px;
}
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
h1, .h1 {
font-size: 3.815rem;
}
h2, .h2 {
font-size: 2.441rem;
}
h3, .h3 {
font-size: 1.563rem;
}
h4, .h4 {
font-size: 1.25rem;
}
html, body {
height: 100%;
}
.cta-location .cta-location-bg {
background-image: url("https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.cta-location .cta-location-text-content {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="my-6">
<div class="cta-location h-100">
<div class="bg-dark text-white cta-location-bg">
<div class="container d-flex align-items-center">
<div class="row w-100">
<!-- <div class="text-left col-lg-4 col-sm-12 cta-location-text-content"> -->
<div class="cta-location-text-content">
<h2 class="card-title ">
Your Success, Without Borders
</h2>
<p class="card-text ">
Our global network of strategic locations puts us close to your operations, so you can get the
products, service and support you need fast.
</p>
<div class="">
Find a location
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="./js/extra-jquery.js"></script>
</body>
</html>
Several issues here but notably your content is absolutely positioned such that the containers all collapse and have 0 height. This is the rule I changed to at least get the background to appear, you can see I commented out nearly everything in there:
.cta-location .cta-location-text-content {
/* text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
color: white;
}
You will need to take a different approach to centering the content besides position: absolute.
h1, h2, h3, h4, h5, h6 {
font-family: 'Teko', sans-serif;
}
html {
font-size: 18px;
}
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
h1, .h1 {
font-size: 3.815rem;
}
h2, .h2 {
font-size: 2.441rem;
}
h3, .h3 {
font-size: 1.563rem;
}
h4, .h4 {
font-size: 1.25rem;
}
html, body {
height: 100%;
}
.cta-location .cta-location-bg {
background-image: url("https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.cta-location .cta-location-text-content {
/* text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="my-6">
<div class="cta-location h-100">
<div class="bg-dark text-white cta-location-bg">
<div class="container d-flex align-items-center">
<div class="row w-100">
<!-- <div class="text-left col-lg-4 col-sm-12 cta-location-text-content"> -->
<div class="cta-location-text-content">
<h2 class="card-title ">
Your Success, Without Borders
</h2>
<p class="card-text ">
Our global network of strategic locations puts us close to your operations, so you can get the
products, service and support you need fast.
</p>
<div class="">
Find a location
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="./js/extra-jquery.js"></script>
</body>
</html>
Change height: 100% to height: 100vh will resolve your issue, i hope it'll help you out. Thanks
h1, h2, h3, h4, h5, h6 {
font-family: 'Teko', sans-serif;
}
html {
font-size: 18px;
}
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
h1, .h1 {
font-size: 3.815rem;
}
h2, .h2 {
font-size: 2.441rem;
}
h3, .h3 {
font-size: 1.563rem;
}
h4, .h4 {
font-size: 1.25rem;
}
html, body {
height: 100%;
}
.cta-location .cta-location-bg {
background-image: url("https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1");
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.cta-location .cta-location-text-content {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="my-6">
<div class="cta-location h-100">
<div class="bg-dark text-white cta-location-bg">
<div class="container d-flex align-items-center">
<div class="row w-100">
<!-- <div class="text-left col-lg-4 col-sm-12 cta-location-text-content"> -->
<div class="cta-location-text-content">
<h2 class="card-title ">
Your Success, Without Borders
</h2>
<p class="card-text ">
Our global network of strategic locations puts us close to your operations, so you can get the
products, service and support you need fast.
</p>
<div class="">
Find a location
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="./js/extra-jquery.js"></script>
</body>
</html>
im using Bootstrap 4. I have container with div which is outside of container on right side. Is it possible to do the same with a picture div? I did it with pseudo-element :after and "another" background color. (If you don't understand what i want to achieve
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="container">
<div class="box-image"> </div>
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You can use container-fluid only for the image..
I have edited the code.
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="container-fluid">
<div class="box-image"> </div>
</div>
<div class="container">
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Hope this could help:
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
width: 80%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="box-image"> </div>
<div class="container">
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
body {
overflow-x: hidden;
}
.box {
background-color: #F0F6FB;
padding: 120px 20px;
margin-right: 0;
margin-left: auto;
margin-top: -125px;
position: relative;
border-radius: 50px 0px 0px 50px;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 80%;
right: -3000px;
background: #F0F6FB;
z-index: -1;
}
.box-image {
background: url(https://images5.alphacoders.com/456/456536.jpg);
height: 230px;
border-radius: 0px 50px 50px 0px;
margin-top: 60px;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
position: relative;
}
.box-image:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 80%;
left: -3000px;
background: #FF0000;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<div class="container">
<div class="box-image"> </div>
<div class="box">
</div>
</div>
<br/><br/> <br/><br/> <br/><br/> <br/><br/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>