Could I please have some help, I am fairly new. I'm trying to move the second section tag down the page but it keeps overlapping with the other section.
I'm trying to make it in its own container without the body background overlapping it. Any help would be appreciated.
body {
background: url(https://cdn.pixabay.com/photo/2018/03/31/23/08/water-3279564_1280.jpg);
background-size: cover;
background-position: center;
text-align: center;
}
h1 {
padding-top: 20%;
padding-bottom: 40px;
}
h6 {
padding-bottom: 20px;
}
#content {
color: white;
}
<!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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/oil.css">
<title>Oil Rig</title>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Welcome to Oil Rig Company</h1>
<h6>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</h6>
<button class="btn btn-warning">About Us</button>
</div>
</div>
</div>
</section>
<section class="about" id="about">
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="https://cdn.pixabay.com/photo/2012/04/13/14/34/oil-platform-32639_1280.png">
</div>
<div class="col-md-6">
<h3>Our Mission</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing anim id est laborum.</p>
</div>
</div>
</div>
</section>
</body>
</html>
Related
I'm trying to replicate this website vertical centering for my own website but I keep seen my content up to the top of the view port.
Expected result:
My code:
The snippet:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JorgeEscobar.XYZ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container py-auto">
<header class="mb-auto"></header>
<div class="row align-items-center">
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture">
</div>
<div class="col align-self-center">
<h1 class="text-center">Hola, soy <span class="text-primary">Jorge.</span></h1>
<p class="text-center text-muted">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam
perferendis libero itaque accusantium fugiat aperiam, illo natus voluptate!</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
<footer class="mt-auto text-white-50">
<p>Cover template for Bootstrap, by #mdo.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Thank you for your time.
It's not vertically centered because you haven't set the height to the parent (i.e., row).
See the snippet below.
.row {
height: 100vh;
border: 1px solid red;
}
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JorgeEscobar.XYZ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container py-auto">
<header class="mb-auto"></header>
<div class="row align-items-center">
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture">
</div>
<div class="col align-self-center">
<h1 class="text-center">Hola, soy <span class="text-primary">Jorge.</span></h1>
<p class="text-center text-muted">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam perferendis libero itaque accusantium fugiat aperiam, illo natus voluptate!</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
<footer class="mt-auto text-white-50">
<p>Cover template for Bootstrap, by #mdo.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
EDIT
To reply #Jitender... Yes, but the OP didn't include header and footer into the code. Therefore, my original answer solves the problem. However, if OP wants to have a header and footer, then the snippet below is the solution.
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body class="d-flex h-100 text-center text-bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">Header</header>
<main>
<div class="row align-items-center">
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture">
</div>
<div class="col align-self-center">
<h1 class="text-center">Hola, soy <span class="text-primary">Jorge.</span></h1>
<p class="text-center text-muted">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam perferendis libero itaque accusantium fugiat aperiam, illo natus voluptate!</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
</main>
<footer class="mt-auto">Footer</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
The answer given above by Cerves is partially correct... If you are planning to replicate the view in the link provided... You can add a few stlyling like provided below
Like we should add the height to the whole body and have an overflow-y:hidden... this will not show scroll and limit you page view to the screen height... The container containing the content here "row" will be set to max-height of 100vh(height:100vh)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JorgeEscobar.XYZ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
</head>
<body style="height: 100vh; overflow-y: hidden">
<div class="container py-auto">
<header class="mb-auto"></header>
<div class="row align-items-center" style="height: 100vh; overflow-y: hidden" >
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture" />
</div>
<div class="col align-self-center">
<h1 class="text-center">
Hola, soy <span class="text-primary">Jorge.</span>
</h1>
<p class="text-center text-muted">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam
perferendis libero itaque accusantium fugiat aperiam, illo natus
voluptate!
</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
<footer class="mt-auto text-white-50">
<p>
Cover template for
Bootstrap,
by #mdo.
</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container-fuild padding">
<div class="row padding">
<div class="col-lg-4">
<h2>Our padding</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicin
g elit. Nostrum, officiis.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="col-lg-8">
<img src="https://via.placeholder.com/300/09f/fff.png
C/O https://placeholder.com/" alt="" class="img-fluid">
</div>
</div>
</div>
</body>
</html>
Thats all the code I use
When you shrink the site how do you make the picture go above and the text under in bootstrap instead of the over way around as in the picture
My assignment is that when the code is normal the picture should stay as normal on the right and the lorem on the left and when it shrinks the picture should go above and text down
I wanted to create something like this
But my code is coming out to be completely different and I am not able to figure out why.
The image is enlarged and going out of the div. Also if I try to shift the image towards right it instead is going to the left. I think I messed up in the positioning part of the image. How can I fix this issue and why is it happening? Here is my code:
#title {
background-color: #916BBF;
}
.container-fluid {
padding: 3% 15%;
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title */
.title-img {
width: 60%;
transform: rotate(25deg);
position: absolute;
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
}
.feature-box {
text-align: center;
padding: 5%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- JS bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Title -->
<section id="title">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</section>
</body>
</html>
I went ahead and took your width off your img class and added a few styles. Next steps to achieve this look would be to contain your h1 and buttons on the left and provide a margin left.
EDIT:
I also added a col-sm-6 Bootstrap class to your col-lg-6 to make it mobile responsive. The #media only screen on your img class allows you to adjust the img to make it positioned just right on a different device.
#title {
background-color: #916BBF;
}
.container-fluid {
padding: 3% 15%;
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title */
.title-img {
transform: rotate(27deg);
position: absolute;
margin-top: 5rem;
overflow-x: hidden;
}
/* Title Responsive */
#media only screen and (max-width: 900px) {
.title-img {
transform: rotate(27deg);
position: absolute;
margin-top: 5rem;
right: 2rem;
overflow-x: hidden;
}
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
}
.feature-box {
text-align: center;
padding: 5%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- JS bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Title -->
<section id="title">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6 col-sm-6">
<img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-lg-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- JS bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<style>
#title {
background-color: #916BBF;
}
.container-fluid {
padding: 3% 15%;
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title */
.title-img {
width: 60%;
transform: rotate(25deg);
position: relative;
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
margin-top: -128px;
}
.feature-box {
text-align: center;
padding: 5%;
}
</style>
<body>
<!-- Title -->
<section id="title">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-md-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-md-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="feature-box col-md-4">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</section>
</body>
</html>
I'm have a form with some tags. The from is pre-populated, but I cannot seem to be able to assign the initial height of the item using min-content. For instance:
.item {
display: flex;
align-items: center;
padding: 0 0.5rem 0 0.5rem;
font-size: 0.8rem;
}
.item > textarea {
width:100%;
margin: 1rem 0 0 1rem;
min-height: 20px;
height: min-content;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sandbox index</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-4"></div>
<div class="col-4">
<div class="item"><label for="">some label</label><textarea name="" id="" cols="30" rows="10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus autem </textarea></div>
<div class="col-4"></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/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
I don't need to resize based on input (e.g. I've seen other questions, that involve javascript in some ways). But it seems to me there really should be a way to set it directly with css if it only needs to remain static, non?
How about using a contenteditable that looks like textarea with css?
.textarea {
display: block;
width: 100%;
overflow: hidden;
resize: both;
min-height: 40px;
line-height: 20px;
border: 1px solid #ccc;
padding: 1px 6px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sandbox index</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-4"></div>
<div class="col-4">
<div class="item"><label for="">some label</label><span contenteditable class="textarea" name="" id="" cols="30" rows="10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus autem </span></div>
<div class="col-4"></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/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
You can have a static placeholder using CSS
.textarea[contenteditable]:empty::before {
content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus autem";
color: gray;
}
I'm facing an issue in matching the size of a box to mobile(using bootstrap)
I have got 3 boxes, number 1 and 2 are images and number 3 has text,
and it looks like this
when I resize the screen to mobile size this is what happens(box number 3 is higher or in some devices shorter than box number 2, like here:error
I need it to look like that (box number 3 in the same height as 2):desired output
I tried to set max height and min hight to box3 but this is not the solution because it doesn't match to all the devices.
html:
<section id="carousel-section">
<div class="container-fluid">
<div class="row feature">
<div class="col-lg-8 col-xl-8 col-md-12 col-xs-12 col-sm-12 ">
<div class="carousel-margin">
<div id="myCarousel" class="carousel1 slide container-carousel" data-
ride="carousel1">
<!-- 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">
<div class="item active">
<img src="images/dragon_hunter_pic.png" alt="dragon_hunter_pic"
id="mainImage1" >
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-xl-4 col-md-5 col-xs-5 col-sm-5 ">
<div class="women-margin">
<img src="images/women_3.png" alt="live" id="women-eyes1" >
</div>
</div>
<div class="col-lg-4 col-xl-4 col-md-7 col-xs-7 col-sm-7 ">
<div class="yellow-box">
<h2 id="change_h2">THE DRAGON HUNTER</h2>
<br/>
<p id="change_p"> Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolor aliqua. </p>
</div>
</div>
</div>
</div>
</section>
this is the problematic box, box number 3:
<div class="yellow-box">
css:
.yellow-box{
position: relative;
display: block;
background-repeat: no-repeat;
background-size: cover;
min-height: 204px;
margin-top:150px;
background-color: #e6ff00;
margin-left: -15px;
margin-right: -15px;
}
this is box number 2:
.women-margin{
margin: -1px -15px -2px -17px;
position: relative;
display: block;
padding-right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Nested Rows and Columns</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
/* Some custom styles to beautify this example */
.main-content{
min-height: 330px;
background: #dbdfe5;
}
.sidebar-content{
min-height: 150px;
margin-bottom: 30px;
background: #b4bac0;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-4">
<div class="main-content"></div>
</div>
<div class="col-xs-6 col-lg-4">
<!--Nested rows within a column-->
<div class="sidebar-content"></div></div>
<div class="col-xs-6 col-lg-4">
<div class="sidebar-content"></div>
</div>
</div>
</div>
</body>
</html>
Try this code.. for more info click here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Nested Rows and Columns</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
/* Some custom styles to beautify this example */
.main-content{
min-height: 330px;
background: #dbdfe5;
}
.sidebar-content{
min-height: 150px;
margin-bottom: 30px;
background: #b4bac0;
}
.left{
background: red;
}
.box2{
background: green;
height: 100%;
}
.box3{
height: 100%;
background: blue;
}
.right{
background:green;
margin:0;
padding:0;
}
</style>
</head>
<body>
<section id="carousel-section">
<div class="container-fluid">
<div class="row feature">
<div class="col-lg-8 col-xl-8 col-md-12 col-xs-12 col-sm-12 left">
<div class="carousel-margin">
<div id="myCarousel" class="carousel1 slide container-carousel" data-
ride="carousel1">
<!-- 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">
<div class="item active">
<img src="images/dragon_hunter_pic.png" alt="dragon_hunter_pic"
id="mainImage1" >
</div>
</div>
</div>
</div>
</div>
<div class="right col-lg-4 col-xl-4 col-md-12 col-xs-12 col-sm-12">
<div class="col-lg-12 col-md-6 box2">
<div class="women-margin">
<img src="images/women_3.png" alt="live" id="women-eyes1" >
</div>
</div>
<div class="col-lg-12 col-md-6 box3">
<div class="yellow-box">
<h2 id="change_h2">THE DRAGON HUNTER</h2>
<br/>
<p id="change_p"> Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolor aliqua. </p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>