I have the code below. My problem is that if I add too much text, it pushes down the entire row and the image has extra space underneath. How can I make sure that the image always fills out its container and its height adapts to the amount of content in the other column?
Here is an image in case the code snippet does not show exactly what I see.
I am using Bootstrap4.
.lesson-heading h2 {
font-size: 24px;
font-weight: 600;
}
.lesson {
background-color: #ffffff;
margin-top: 25px;
}
.lesson-img {
padding-left: 0px;
padding-right: 0px;
position: relative;
}
.trial-badge {
position: absolute;
background-color: green;
top: 10px;
left: 25px;
color: #ffffff;
font-size: 13px;
font-weight: 600;
padding: 3px 10px;
}
.lesson-content-header {
padding-top: 15px;
padding-right: 15px;
}
.lesson-content {
padding-bottom: 15px;
}
.lesson-title h4 a {
font-size: 22px;
font-weight: 600;
color: #333131;
text-decoration: none;
}
.lesson-title h4 a:hover {
color: #ed6310;
transition: .7s;
}
.lesson-status-completed i {
color: green;
}
.lesson-status-locked i, .lesson-status-new i {
color: #ccc;
}
.lesson-desc p {
font-size: 15px;
line-height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="lesson">
<div class="row">
<div class="col-lg-4">
<div class="lesson-img">
<img src="https://cdn.pixabay.com/photo/2019/04/07/23/11/content-marketing-4111003__340.jpg" alt=""
class="img-fluid">
</div>
<div class="trial-badge">
<span>Trial</span>
</div>
</div>
<div class="col-lg-8 lesson-content">
<div class="lesson-content-header d-flex justify-content-between">
<div class="lesson-title">
<h4>This is the title of the lesson</h4>
</div>
<div class="lesson-status-completed"><i class="fas fa-check-circle"></i></div>
</div>
<div class="lesson-desc">
<p>This is the description of the lesson. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ullam aliquid nam adipisci in quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in
quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in quae voluptate sunt fuga
impedit.</p>
</div>
</div>
</div>
</div>
</div>
try this code:
.lesson-heading h2 {
font-size: 24px;
font-weight: 600;
}
.lesson {
background-color: #ffffff;
margin-top: 25px;
}
.lesson-img {
padding-left: 0px;
padding-right: 0px;
position: relative;
}
.trial-badge {
position: absolute;
background-color: green;
top: 10px;
left: 25px;
color: #ffffff;
font-size: 13px;
font-weight: 600;
padding: 3px 10px;
}
.lesson-content-header {
padding-top: 15px;
padding-right: 15px;
}
.lesson-content {
padding-bottom: 15px;
}
.lesson-title h4 a {
font-size: 22px;
font-weight: 600;
color: #333131;
text-decoration: none;
}
.lesson-title h4 a:hover {
color: #ed6310;
transition: .7s;
}
.lesson-status-completed i {
color: green;
}
.lesson-status-locked i, .lesson-status-new i {
color: #ccc;
}
.lesson-desc p {
font-size: 15px;
line-height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="lesson">
<div class="row">
<div class="col-lg-4">
<div class="lesson-img h-100">
<img src="https://cdn.pixabay.com/photo/2019/04/07/23/11/content-marketing-4111003__340.jpg" alt=""
class="img-fluid h-100">
</div>
<div class="trial-badge">
<span>Trial</span>
</div>
</div>
<div class="col-lg-8 lesson-content">
<div class="lesson-content-header d-flex justify-content-between">
<div class="lesson-title">
<h4>This is the title of the lesson</h4>
</div>
<div class="lesson-status-completed"><i class="fas fa-check-circle"></i></div>
</div>
<div class="lesson-desc">
<p>This is the description of the lesson. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ullam aliquid nam adipisci in quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in
quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in quae voluptate sunt fuga
impedit.</p>
</div>
</div>
</div>
</div>
</div>
Related
while I am making a responsive site with bootstrap, I give min-height 100vh for both the home and about section. it looks nice for the large screen, but for the small screen, there is more space between the home section and the about section. how can I control that space for the small screen? I tried media queries to control the space between the home and about section for the small screen. I can't fix this. so tell me how to control that.
.row {
display: flex !important;
justify-content: flex-end !important;
align-items: center;
min-height: 100vh;
}
.first__para {
font-size: 1.5rem;
}
.landing__btn {
text-decoration: none;
color: #0275d8;
font-size: 1.5rem;
}
.landing__btn::after {
content: "";
height: 2px;
width: 0px;
opacity: ;
background: #0275d8;
display: block;
position: absolute;
transition: .3s;
}
.landing__btn:hover::after {
content: "";
height: 2px;
width: 105px;
background: #0275d8;
display: block;
position: absolute;
transition: .3s;
transform-origin: 0%;
z-index: 10;
}
.about__head {
color: #0275d8
}
.about__para {
font-size: 1.5rem;
}
.about__btn {
text-decoration: none;
color: #0275d8;
font-size: 1.5rem;
}
.about__btn::after {
content: "";
height: 2px;
width: 0px;
opacity: ;
background: #0275d8;
display: block;
position: absolute;
transition: .3s;
}
.about__btn:hover::after {
content: "";
height: 2px;
width: 130px;
background: #0275d8;
display: block;
position: absolute;
transition: .3s;
transform-origin: 0%;
z-index: 10;
}
<!--landing page-->
<div class="container">
<div class="row">
<div class="col-12 col-md-12 col-lg-12">
<h1 class="text-primary">the vollmonds</h1>
<p class="first__para">Businesses get blinded by the allure of a large subscription list, <br>but unengaged subscribers aren't just not interested in what you're sending, they're actually harming your deliverability</p>
for more<span></span>
</div>
</div>
</div>
<!--landing-page-->
<!--about-->
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<img src="https://cdni.iconscout.com/illustration/premium/thumb/startup-business-1460503-1234533.png" alt="marketting">
</div>
<div class="col-12 col-lg-6">
<h1 class="about__head">about</h1>
<p class="about__para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nisi dicta voluptatem cumque eius, <br>facere veritatis beatae rerum maxime ea accusamus, cum dolore ipsam quasi fugiat sit ullam error quas!</p>
<p class="about__para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nisi dicta voluptatem cumque eius, <br>facere veritatis beatae rerum maxime ea accusamus, cum dolore ipsam quasi fugiat sit ullam error quas!</p>
learn more
</div>
</div>
</div>
<!--about-->
I recommend adding some CSS that will increase margin on top of additional .container elements (or any class you name them), and then a media query to remove the margin if you desire. Code below for reference
.row {
display: flex !important;
justify-content: flex-end !important;
align-items: center;
min-height: 100vh;
}
.first__para {
font-size: 1.5rem;
}
.landing__btn {
text-decoration: none;
color: #0275d8;
font-size: 1.5rem;
}
.landing__btn::after {
content: "";
height: 2px;
width: 0px;
opacity: ;
background: #0275d8;
display: block;
position: absolute;
transition: .3s;
}
.landing__btn:hover::after {
content: "";
height: 2px;
width: 105px;
background: #0275d8;
display: block;
position: absolute;
transition: .3s;
transform-origin: 0%;
z-index: 10;
}
.about__head {
color: #0275d8
}
.about__para {
font-size: 1.5rem;
}
.about__btn {
text-decoration: none;
color: #0275d8;
font-size: 1.5rem;
}
.about__btn::after {
content: "";
height: 2px;
width: 0px;
opacity: ;
background: #0275d8;
display: block;
position: absolute;
transition: .3s;
}
.about__btn:hover::after {
content: "";
height: 2px;
width: 130px;
background: #0275d8;
display: block;
position: absolute;
transition: .3s;
transform-origin: 0%;
z-index: 10;
}
/* New CSS */
.container + .container {
margin-top: 50px;
}
#media screen and (min-width: 768px) {
.container + .container {
margin-top: 0;
}
}
<!--landing page-->
<div class="container">
<div class="row">
<div class="col-12 col-md-12 col-lg-12">
<h1 class="text-primary">the vollmonds</h1>
<p class="first__para">Businesses get blinded by the allure of a large subscription list, <br>but unengaged subscribers aren't just not interested in what you're sending, they're actually harming your deliverability</p>
for more<span></span>
</div>
</div>
</div>
<!--landing-page-->
<!--about-->
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<img src="https://cdni.iconscout.com/illustration/premium/thumb/startup-business-1460503-1234533.png" alt="marketting">
</div>
<div class="col-12 col-lg-6">
<h1 class="about__head">about</h1>
<p class="about__para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nisi dicta voluptatem cumque eius, <br>facere veritatis beatae rerum maxime ea accusamus, cum dolore ipsam quasi fugiat sit ullam error quas!</p>
<p class="about__para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nisi dicta voluptatem cumque eius, <br>facere veritatis beatae rerum maxime ea accusamus, cum dolore ipsam quasi fugiat sit ullam error quas!</p>
learn more
</div>
</div>
</div>
<!--about-->
so basically I'm creating a fake Italian restaurant site and the images in the img-container wont fit the box, leaving a line below the image. Also, the img-container overflows past the image which I don't want it to do. Any help appreciated.
Here is my code
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;600;700;800&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght#400;700&display=swap");
/* CSS RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styling */
body {
background-color: #dee7e7;
font-family: "Open Sans", sans-serif;
}
/* Nav */
nav {
margin-top: -35px;
height: 70px;
background-color: #fff;
margin: 0px 0px 35px 0px;
height: 60px;
padding: 20px;
}
nav a {
text-decoration: none;
}
nav a:visited {
color: #000;
}
nav a:hover {
cursor: pointer;
}
.nav-links {
float: right;
margin-top: -25px;
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.nav-links .current {
font-weight: 700;
text-decoration: underline;
}
.nav-links a {
padding-right: 10px;
font-size: 16px;
text-decoration: none;
color: #000;
font-weight: 400;
}
.nav-links a:hover {
text-decoration: underline;
}
.nav-links a:visited {
color: #000;
}
header nav h3 {
font-family: "Libre Baskerville", serif;
font-size: 26px;
}
/* Showcase 1 */
.showcase {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 20px;
}
.text-container {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container p {
font-size: 16px;
padding-right: 10px;
}
.btn-primary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #06a77d;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px grey;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container {
background: #c9d7d7;
}
.img-container img {
margin-left: 80px;
overflow: auto;
height: 500px;
}
/* Showcase 2 */
.showcase-2 {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 30px;
background: #192534;
color: #fff;
}
.text-container-2 {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 16px;
order: 1;
}
.text-container-2 h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container-2 p {
font-size: 16px;
padding-right: 10px;
}
.btn-secondary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #cc224e;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px black;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container-2 {
background: #3d5777;
padding-right: -300px;
order: 2;
}
.img-container-2 img {
margin-left: 80px;
max-width: 100%;
height: 510px;
}
.img-good-food img {
float: right;
max-width: 100%;
height: 130px;
margin-right: 20px;
}
.page-title {
text-align: center;
margin-bottom: 30px;
font-family: "Libre Baskerville";
}
.about-container {
place-items: center;
margin: 10px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.about-container p {
font-size: 16px;
padding-right: 10px;
margin-left: 20px;
}
.about-container button {
margin-left: 20px;
}
.menu-text {
text-align: center;
margin-left: 70px;
margin-right: 70px;
margin-bottom: 20px;
}
.menu-container {
display: flex;
justify-content: center;
background: #3d5777;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 20px;
}
.fa-chevron-left {
font-size: 30px;
float: left;
margin-right: 200px;
margin-top: 300px;
color: #fff;
}
.fa-chevron-right {
font-size: 30px;
float: left;
margin-left: 200px;
margin-top: 300px;
color: #fff;
}
.menu-container img {
max-width: 100%;
height: 650px;
margin: 10px;
}
iframe {
margin-top: 40px;
float: right;
margin-right: 100px;
width: 600px;
box-shadow: 1px 1px 1px 1px grey;
}
.contact {
background: #3d5777;
width: 400px;
height: 200px;
color: #fff;
margin-left: 120px;
margin-top: 160px;
place-items: center;
justify-content: center;
padding-top: 30px;
}
.contact p {
margin-bottom: 5px;
}
.fas {
margin-bottom: 5px;
font-size: 16px;
}
/* Footer */
footer {
width: 100%;
text-align: center;
background: #192534;
padding: 10px;
}
footer h2 {
color: #fff;
font-size: 14px;
}
footer a {
color: #8abeff;
}
<header>
<nav>
<a href="">
<h3 class="logo">Chef Italia</h1>
</a>
<div class="nav-links">
<a class="current" href="index.html">Home</a>
About Us
Menu
Contact
</div>
</nav>
</header>
<div class="showcase">
<div class="img-container">
<img src="img/home-showcase.jpg" alt="Photo of Italian cheese on wooden board">
</div>
<div class="text-container">
<h1>Welcome to Chef Italia</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<button class="btn-primary">Find out more</button>
</div>
</div>
</div>
<div class="showcase-2">
<div class="img-container-2">
<img src="img/authenic-italian.png" alt="Photo of 2 pizzas on plates with glasses of water and cutlery on a table">
</div>
<div class="text-container-2">
<h1>Authentic Italian Food</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-secondary">View Our Menu</button>
</div>
</div>
<div class="showcase">
<div class="img-container">
<img src="img/good-food-picture.jpeg" alt="Photo outside of resteraunt with green leaf tree covering one third of the yellow building">
</div>
<div class="text-container">
<h1>Good Food Awards Winner 2019</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-primary">Find Out More</button>
<div class="img-good-food">
<img src="img/good-food.png" alt="Good Food Awards Logo">
</div>
</div>
</div>
<footer>
<h2>© Chef Italia 2021. Designed and developed with 💙 by Tyler Lechowski</h2>
</footer>
Did you try to just add:
.img-container {
position:relative
}
.img-container img {
height: 100%;
width: 100%;
}
To define image size you can add for example:
.img-container {
position:relative;
width: 200px;
height: 200px;
}
but be sure you add it to .img-container, not .img-container img. In .img-container you define size in pixels but in .img-container img you make it 100% for width and height to fill whole container
Try adding this:
.img-container {
position: relative;
overflow: hidden;
}
.img-container img {
height: 100%;
min-width: 100%;
object-fit: cover;
position: absolute;
}
Oveflow hidden to hide any part of the picture that comes outside the container. Object-fit cover to make it cover the container. If you want smaller picture just specify height and width on the container.
I crreated this full-width section using Bootstrap 4. On large screen they look ok, but as I decrease the screensize the column heights are not equal. How can I make them equal heights so it will not affect if one contains more content than the other?
This what I see:
I tried to add 100% height to the services-3-box-wrapper class. Any help is appreciated.
#services-3 {
padding-top: 0px;
padding-bottom: 0px;
}
#services-3 .container-fluid {
padding-left: 0;
padding-right: 0;
}
#services-3 .service-box-1 {
background-color: #199adb;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-1 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-1 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-1 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-1 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-2 {
background-color: #5eb8e4;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-2 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-2 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-2 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-2 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-3 {
background-color: #199adb;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-3 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-3 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-3 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-3 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-4 {
background-color: #5eb8e4;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-4 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-4 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-4 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-4 .sb-desc p {
color: #ffffff;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services-3">
<div class="container-fluid">
<div class="row no-gutters">
<!-- Service 1 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-1">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-user-md"></i>
</div>
<div class="sb-title">
<h5>Qualified Doctors</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 2 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-2">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-ambulance"></i>
</div>
<div class="sb-title">
<h5>Emergency Services</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 3 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-3">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-procedures"></i>
</div>
<div class="sb-title">
<h5>In-patient care</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 4 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-4">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-user-nurse"></i>
</div>
<div class="sb-title">
<h5>Friendly Staff</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Just add these 2 rule to your CSS and it will fix the issue.
.services-3-box-wrapper {
height: 100%;
}
div[class^="service-box"]{
height: 100%;
}
actually Flex child automatically have the equal height but to inner items you have to make it 100%, and your were doing the right thing, but you have to make sure that the div which you gave background color need to have that height 100% property and all above parents of it as well.
Check this working
#services-3 {
padding-top: 0px;
padding-bottom: 0px;
}
#services-3 .container-fluid {
padding-left: 0;
padding-right: 0;
}
#services-3 .service-box-1 {
background-color: #199adb;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-1 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-1 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-1 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-1 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-2 {
background-color: #5eb8e4;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-2 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-2 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-2 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-2 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-3 {
background-color: #199adb;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-3 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-3 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-3 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-3 .sb-desc p {
color: #ffffff;
text-align: center;
}
#services-3 .service-box-4 {
background-color: #5eb8e4;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 45px;
padding-right: 45px;
}
#services-3 .service-box-4 .sb-icon i {
color: #ffffff;
font-size: 40px;
}
#services-3 .service-box-4 .sb-title {
margin-top: 20px;
}
#services-3 .service-box-4 .sb-title h5 {
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-weight: 600;
font-size: 19px;
}
#services-3 .service-box-4 .sb-desc p {
color: #ffffff;
text-align: center;
}
.services-3-box-wrapper {
height: 100%;
}
div[class^="service-box"]{
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services-3">
<div class="container">
<div class="row no-gutters">
<!-- Service 1 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-1">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-user-md"></i>
</div>
<div class="sb-title">
<h5>Qualified Doctors</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 2 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-2">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-ambulance"></i>
</div>
<div class="sb-title">
<h5>Emergency Services</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 3 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-3">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-procedures"></i>
</div>
<div class="sb-title">
<h5>In-patient care</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
<!-- Service 4 -->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="services-3-box-wrapper">
<div class="service-box-4">
<div class="sb-icon d-flex justify-content-center">
<i class="fas fa-user-nurse"></i>
</div>
<div class="sb-title">
<h5>Friendly Staff</h5>
</div>
<div class="sb-desc">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
example.
Currently experimenting with HTML and CSS and am struggling with this issue.
I'm messing around with a responsive website, and somehow can't make my navigation bar exceed the max-width of my navbar exceed the max-width of my content.
What I'd like it to look like https://imgur.com/a/KAk9mOi
I do really hope anyone can help me.
TIA.
<nav class="navbar">
<ul class="nav-items">
<li class="nav-item nav-item--active">Home</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
.main {
}
.navbar {
padding: 20px;
background-color: #1C2826;
max-width: 100%;
}
.nav-items {
display: flex;
justify-content: center;
}
.nav-items > li {
flex: 1;
text-align: center;
}
.nav-item:not(:last-of-type) {
margin-right: 20px;
}
.nav-item--active {
/* after */
}
.content {
padding: 8px;
}
.login-card {
border: 1px solid #999;
margin-bottom: 20px;
padding: 12px;
border-radius: 4px;
}
.login {
display: flex;
flex-direction: column;
}
.login-button {
background-color: #D64550;
padding: 4px;
border: none;
color: #ffffff;
font-size: 20px;
}
.login-input {
margin-bottom: 8px;
border: none;
border-bottom: 1px solid #999;
padding-top: 4px;
padding-bottom: 4px;
}
.footer {
padding: 8px;
}
.inline-block {
display: inline-block;
}
/* Alt over 460px */
#media only screen and (min-width: 460px) {
.main{
max-width: 600px;
}
.navigation-items{
flex-wrap: wrap;
}
.login-button {
font-size: inherit;
}
}
https://jsfiddle.net/m0u79e8s/
I hope this is useful
* {
padding: 0px;
margin: 0px;
}
.main {
}
.navbar {
padding: 20px;
background-color: #1C2826;
width: 100%;
}
.nav-items {
display: flex;
justify-content: center;
}
.nav-items > li {
flex: 1;
text-align: center;
}
.nav-item:not(:last-of-type) {
margin-right: 20px;
}
.nav-item--active {
/* after */
}
.content {
padding: 8px;
}
.login-card {
border: 1px solid #999;
margin-bottom: 20px;
padding: 12px;
border-radius: 4px;
}
.login {
display: flex;
flex-direction: column;
}
.login-button {
background-color: #D64550;
padding: 4px;
border: none;
color: #ffffff;
font-size: 20px;
}
.login-input {
margin-bottom: 8px;
border: none;
border-bottom: 1px solid #999;
padding-top: 4px;
padding-bottom: 4px;
}
.footer {
padding: 8px;
}
.inline-block {
display: inline-block;
}
/* Alt over 460px */
#media only screen and (min-width: 460px) {
.main {
display: flex;
flex-direction: column;
align-items: center;
}
.content {
max-width: 460px;
}
.navigation-items{
flex-wrap: wrap;
}
.login-button {
font-size: inherit;
}
}
<!doctype html>
<html>
<head>
<title>Responsive time</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./generic.css">
<link rel="stylesheet" href="./styles.css">
</head>
<html>
<body>
<main class="main">
<!-- Navigation elements -->
<nav class="navbar">
<ul class="nav-items">
<li class="nav-item nav-item--active">Home</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<!-- Section -->
<section class="content">
<h1 class="test">Time to get responsive</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore deleniti, quia provident!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quas alias reiciendis velit, dolor eos temporibus culpa ex modi itaque nostrum natus doloribus sed maiores, a obcaecati quia sequi quisquam corrupti perspiciatis sit quam, qui expedita. Nemo sed dolor earum voluptate quod reiciendis rem laborum atque ex nulla sapiente ea ullam assumenda, fugiat quae incidunt dicta, cupiditate repellendus possimus aliquid! Ad veniam vero alias, rem quod atque dolores saepe possimus, tempora, eaque magnam culpa animi repellendus ratione dolorem harum quo.</p>
<!-- Form -->
<div class="login-card">
<form class="login" action="#" method="get">
<input class="login-input" type="email" placeholder="Indtast email">
<input class="login-input" type="password" placeholder="Indtast kodeord">
<button class="login-button">Send</button>
</form>
</div>
<picture>
<source media="(max-width:459px)" srcset="img/cow.jpg">
<source media="(min-width:460px)" srcset="img/dog.jpg">
<img src="/img/cow.jpg" alt="animals">
</picture>
</section>
<footer class="footer">
<div class="footer-content">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quas beatae voluptate.</p>
Some other link
</div>
<div class="footer-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi!</p>
<img class="logo-image" src="/rubbish" alt="">
</div>
</footer>
</main>
</body>
</html>
</html>
I have a little problem with bootstrap, I test lot of possibility for resolve my problem, but I dont found the good..
I have a footer. The footer is in the container for align with the bootstrap grid. I would like to put the width contact block at 100% at the right.Currently it is blocked against the container.
the block are perfectly align, i have just this problem
Curently:
Final result :
(See my code in full view)
#charset 'UTF-8';
#import url('https://fonts.googleapis.com/css?family=Lato:300,400,900|Merriweather:400,400i,700i');
.accompagnement {
height: 550px;
background: #fafafa;
}
.accompagnement__titre {
font-family: Merriweather, serif;
font-size: 30px;
font-weight: 400;
line-height: 240px;
position: relative;
color: #aba08c;
}
.accompagnement__titre:after {
position: absolute;
right: 40%;
bottom: 70px;
width: 200px;
height: 1px;
content: ' ';
background: #aba08c;
}
.accompagnement__informations {
background: white;
background-clip: content-box;
}
.accompagnement__image {
width: 100%;
height: 210px;
background: url('../assets/img/spot-of-light-1145368.jpg') no-repeat center center;
}
.accompagnement__texte {
line-height: 26px;
padding: 30px 30px;
}
.accompagnement__texte > h2 {
font-size: 24px;
color: #8b3d61;
}
.accompagnement__texte > p {
font-weight: 300;
}
.valign {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.set-relative {
position: relative;
}
.svg-button {
/**
Gestion du :Hover des SVG
*/
}
.svg-button-gauche,
.svg-button-droite {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
fill: #5e5f78;
}
.svg-button-gauche {
left: -60px;
}
.svg-button-droite {
right: -60px;
}
.svg-button-fleche {
fill: none;
stroke: #ccc;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
.svg-button-contour {
fill: #ccc;
}
.svg-button-gauche:hover .svg-button-fleche,
.svg-button-droite:hover .svg-button-fleche {
stroke: red;
}
.svg-button-gauche:hover .svg-button-contour,
.svg-button-droite:hover .svg-button-contour {
fill: red;
}
footer {
position: relative;
background: #e5e3e8;
}
footer ul {
margin: 50px 0 140px 0;
color: #5e5f78;
}
footer ul li {
font-weight: 300;
line-height: 25px;
}
footer ul li:first-child {
font-family: Merriweather, serif;
font-weight: 400;
line-height: 30px;
}
footer ul li a {
text-decoration: none;
color: inherit;
}
footer ul li a:hover {
color: inherit;
}
.footer {
font-size: 13px;
font-weight: 300;
padding: 30px 0;
color: #5e5f78;
border-top: 1px solid #fff;
}
.footer__copyright {
padding-left: 0;
}
.footer__appolo {
padding-right: 0;
text-align: right;
}
.footer__appolo > a {
display: inline-block;
text-decoration: none;
color: #5e5f78;
}
.footer__appolo > a:first-child:after {
margin: 0 15px;
content: '•';
}
.contacts {
position: absolute;
top: -20px;
right: 0;
height: 409px;
background: #fff;
background-clip: content-box;
}
.contacts > h2 {
font-family: Merriweather, serif;
font-size: 30px;
line-height: 30px;
position: relative;
margin-bottom: 55px;
color: #aba08c;
}
.contacts > h2:after {
position: absolute;
bottom: -30px;
left: 0;
width: 300px;
height: 1px;
content: ' ';
background: #aba08c;
}
.contacts__tel {
font-weight: 300;
line-height: 30px;
margin: 0 0 50px 0;
}
.contacts__permanence,
.contacts__disponibilite,
.contacts__lieu {
font-family: Merriweather, serif;
font-size: 14px;
font-weight: 400;
line-height: 30px;
margin: 0;
}
.contacts__adresse {
font-size: 14px;
font-weight: 300;
line-height: 20px;
margin: 0;
color: #5e5f78;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container-fluid accompagnement">
<div class="container">
<div class="row">
<div class="container">
<div class="row set-relative">
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis dignissimos fuga nobis, nulla, pariatur, quia quisquam reiciendis repellendus tempore vero voluptas voluptate voluptatibus. Alias ducimus impedit nostrum reprehenderit ut!</p>
</div>
</div>
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur doloribus ducimus eveniet molestiae? Amet delectus, distinctio harum incidunt, laborum libero minima minus molestias quam repudiandae suscipit ut veniam voluptatum.</p>
</div>
</div>
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cumque eligendi expedita id itaque minus modi neque nostrum odio omnis provident quam quas quasi quisquam ratione repellendus, sapiente similique voluptas.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>SubMenu</li>
<li>SubMenu</li>
<li>SubMenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
</div>
<div class="row footer">
<p class="col-lg-6 footer__copyright">© 2017 Company</p>
<div class="col-lg-6 footer__appolo">
Plan
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 contacts">
<h2>Contacts</h2>
<p class="contacts__permanence">Blablabla</p>
<p class="contacts__disponibilite">Blablabla</p>
<p class="contacts__tel">Blablabla</p>
<p class="contacts__lieu">Blablabla</p>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
Thanks
If your block is inside a .container, you can't expand it outside the container, unless you make it position:absolute or something like this.
You could also change the .container in the footer into a .container-fluid, and then create 2 blocks inside for placing.
.container is made to be centered on devices > "xs".