Adjusting the text line height in HTML/CSS - html

I'm creating a very simple checkout UI with bootstrap. Here's what I have so far:
<ul class="list-group list-group-flush">
<li class="list-group-item bg-light px-0">
<h6 class="my-0">Category Name</h6>
<div class="row">
<div class="col text-left"><small class="lh-condensed">Product Name</small></div>
<div class="col text-right"><small class="lh-condensed">$100.00</small></div>
</div>
<div class="row">
<div class="col text-left"><small>Product Name</small></div>
<div class="col text-right"><small>$130.39</small></div>
</div>
</li>
<li class="list-group-item bg-light px-0">
<h6 class="my-0">Category Name</h6>
<div class="row">
<div class="col text-left"><small class="lh-condensed">Product Name</small></div>
<div class="col text-right"><small class="lh-condensed">$100.00</small></div>
</div>
<div class="row">
<div class="col text-left"><small>Product Name</small></div>
<div class="col text-right"><small>$130.39</small></div>
</div>
</li>
</ul>
How do I get the "Product Name" rows closer together? There's no top or bottom margins/padding.. so I'm not too sure how to achieve this.
Any help would be much appreciated!


Bootstrap set the body element with line-height: 24px; and the .row element is inheriting it... You should set the line-height of the .row element inside your list group...
.list-group-item .row {
line-height: 10px;
}
li.list-group-item .row {
line-height: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-light px-0">
<h6 class="my-0">Category Name</h6>
<div class="row">
<div class="col text-left"><small class="lh-condensed">Product Name</small></div>
<div class="col text-right"><small class="lh-condensed">$100.00</small></div>
</div>
<div class="row">
<div class="col text-left"><small>Product Name</small></div>
<div class="col text-right"><small>$130.39</small></div>
</div>
</li>
<li class="list-group-item bg-light px-0">
<h6 class="my-0">Category Name</h6>
<div class="row">
<div class="col text-left"><small class="lh-condensed">Product Name</small></div>
<div class="col text-right"><small class="lh-condensed">$100.00</small></div>
</div>
<div class="row">
<div class="col text-left"><small>Product Name</small></div>
<div class="col text-right"><small>$130.39</small></div>
</div>
</li>
</ul>

Related

CSS radial-gradient curve causes glitched one pixel box area

The expected result from the prototype:
My work (so far):
The problem:
1: There is a 1-pixel glitch border in the curvy area. It appears or disappears depending on website size, for example when the developer console is shown/hidden, changed its size, changed window size, or zoom in/out. How can I fix that?
2: The curve exists but it doesn't resemble the one from the prototype. How can I change the code to make the curve look more similar to the one from the prototype?
The code of the footer:
<nav class="navbar navbar-expand-lg">
<div class="container-fluid" style="background-image: linear-gradient(135deg, #3ab3da , #6858a2);">
<div class="row w-100">
<div class="col-md-4 p-0">
<div class="container h-50 d-flex align-items-center" style="background: white;">
<div class="row w-100">
<div class="col-lg-4 p-0">
</div>
<div class="col-lg-8 col-12 p-0">
<img class="img-fluid pb-3" src="<?php echo wp_get_attachment_image_src(25, "thumbnail")[0]; ?>" style="" />
</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="row h-25" style="background: white">
<div class="col"></div>
</div>
<div class="row h-25" style="background: radial-gradient(farthest-side at top left,white 100.00%, transparent 100.00%) bottom right;">
<div class="col"></div>
</div>
<div class="row h-75">
<div class="col"></div>
</div>
</div>
<div class="col-md-1">
<div class="row h-25" style="background: radial-gradient(farthest-side at bottom right,transparent 100.00%,white 100.00%) top left;">
<div class="col"></div>
</div>
<div class="row h-25">
<div class="col"></div>
</div>
<div class="row h-75">
<div class="col"></div>
</div>
</div>
<div class="col-md-6">
<div class="row mt-3">
<div class="row">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent_b" aria-controls="navbarSupportedContent_b" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-uppercase fw-bold my-5" id="navbarSupportedContent_b" style="font-size: 24px;">
<?php
wp_nav_menu([
"menu" => "Main menu",
"container" => "",
"theme_location" => "primary",
"items_wrap" => '<ul class="navbar-nav text-sm-center me-auto mb-2 mb-lg-0">%3$s</ul>'
]);
?>
</div>
</div>
</div>
<div class="row mt-1 mb-5">
<div class="col-md-4">
<i class="fa-solid fa-location-dot mx-4"></i>xxx
</div>
<div class="col-md-4 border-start border-end">
<i class="fa-solid fa-phone mx-4"></i> (+48) yyy
</div>
<div class="col-md-4">
<i class="fa-regular fa-envelope mx-4"></i> zzz#zz.pl
</div>
</div>
</div>
</div>
</div>
</nav>
Live example:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<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>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid" style="background-image: linear-gradient(165deg, #3ab3da , #6858a2);">
<div class="row w-100">
<div class="col-md-4 p-0">
<div class="container h-50 d-flex align-items-center" style="background: white;">
<div class="row w-100">
<div class="col-lg-4 p-0">
</div>
<div class="col-lg-8 col-12 p-0">
foto
</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="row h-25" style="background: white">
<div class="col"></div>
</div>
<div class="row h-25" style="background: radial-gradient(farthest-side at top left,white 100.00%, transparent 100.00%) bottom right;">
<div class="col"></div>
</div>
<div class="row h-75">
<div class="col"></div>
</div>
</div>
<div class="col-md-1">
<div class="row h-25" style="background: radial-gradient(farthest-side at bottom right,transparent 100.00%,white 100.00%) top left;">
<div class="col"></div>
</div>
<div class="row h-25">
<div class="col"></div>
</div>
<div class="row h-75">
<div class="col"></div>
</div>
</div>
<div class="col-md-6">
<div class="row mt-3">
<div class="row">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent_b" aria-controls="navbarSupportedContent_b" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-uppercase fw-bold my-5" id="navbarSupportedContent_b" style="font-size: 24px;">
<ul class="navbar-nav text-sm-center me-auto mb-2 mb-lg-0"><li class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-15 mx-4">Strona główna</li>
<li class="nav-item menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-17 mx-4">Sklep</li>
<li class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-20 mx-4">O nas</li>
<li class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-23 mx-4">Kontakt</li>
</ul> </div>
</div>
</div>
<div class="row mt-1 mb-5">
<div class="col-md-4">
<i class="fa-solid fa-location-dot mx-4"></i>adres
</div>
<div class="col-md-4 border-start border-end">
<i class="fa-solid fa-phone mx-4"></i> telefon
</div>
<div class="col-md-4">
<i class="fa-regular fa-envelope mx-4"></i> kontakt
</div>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>

Break the cards by 2 vertical on small screens with the header above the two

I have cards that breaks incorrectly and would like on wide screens to shot the 4 then smaller bread with two columns but the correct header above them.
My jsfiddle is here:
jsfiddle.net/ad5qa/41tbgk75/
I am not sure how to break them by the columns.
<div class="container m-3">
<div class="row row-cols-1 row-cols-sm-2 g-4 text-center">
<div class="col mb-2">
<div class="card h-100">
<div class="card-text">
<h5 class="card-title">Preparacao</h5>
</div>
</div>
</div>
<div class="col mb-2">
<div class="card h-100">
<div class="card-text">
<h5 class="card-title">Pos</h5>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-sm-4 g-4 text-center">
<div class="col">
<div class="card h-100">
<i class="bi bi-wrench-adjustable card-icon"></i>
</div>
</div>
<div class="col">
<div class="card h-100">
<i class="bi bi-shield-lock card-icon"></i>
</div>
</div>
<div class="col">
<div class="card h-100">
<i class="bi bi-heart-pulse card-icon "></i>
</div>
</div>
<div class="col">
<div class="card h-100">
<i class="bi bi-fingerprint card-icon"></i>
</div>
</div>
</div>
</div>

col is pretty vague when it comes to having a responsive Bootstrap layout. You should replace col with col-lg-3 for larger screens to keep the four in a row and then col-md-6 and col-sm-6 for medium and smaller screens to have them be rows of two as desired.
.card-icon {
font-size: 40px;
text-align: center;
color: #e45e24;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
<html>
<head>
</head>
<body>
<div class="d-flex justify-content-center">
<div class="container m-3">
<div class="row row-cols-1 row-cols-sm-2 g-4 text-center">
<div class="col mb-2">
<div class="card h-100">
<div class="card-text">
<h5 class="card-title">Preparação</h5>
</div>
</div>
</div>
<div class="col mb-2">
<div class="card h-100">
<div class="card-text">
<h5 class="card-title">Pós</h5>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-sm-4 g-4 text-center">
<div class="col-sm-6 col-lg-3 col-md-6">
<div class="card h-100">
<i class="bi bi-wrench-adjustable card-icon"></i>
<div class="card-body">
<h5 class="card-title">Title</h5>
<div class="card-text">
<ul class="subdescription">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 col-md-6">
<div class="card h-100">
<i class="bi bi-shield-lock card-icon"></i>
<div class="card-body">
<h5 class="card-title">Title</h5>
<div class="card-text">
<ul class="subdescription">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 col-md-6">
<div class="card h-100">
<i class="bi bi-heart-pulse card-icon "></i>
<div class="card-body">
<h5 class="card-title">Title</h5>
<div class="card-text">
<ul class="subdescription">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 col-md-6">
<div class="card h-100">
<i class="bi bi-fingerprint card-icon"></i>
<div class="card-body">
<h5 class="card-title">Title</h5>
<div class="card-text">
<ul class="subdescription">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

The layout you are trying to achieve is a parent grid with 2 columns that stack to one on small. Each of those parent columns have a nested row containing 2 columns at every size (.col-6). The parent grid row can be .row.row-cols-1.row-cols-sm-2 with 2 .col OR just a .row with 2 .col-12.col-sm-6.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container p-3">
<div class="row row-cols-1 row-cols-sm-2 g-4 text-center">
<div class="col">
<div class="card mb-2">
<div class="card-text">
<h5 class="card-title">One</h5>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card">
1
</div>
</div>
<div class="col-6">
<div class="card">
2
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-2">
<div class="card-text">
<h5 class="card-title">Two</h5>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card">
3
</div>
</div>
<div class="col-6">
<div class="card">
4
</div>
</div>
</div>
</div>
</div>
</div>

Aligning stepper divs inside a container using bootstrap

I have a list of header icons in a Stepper inside a container and I am trying to get them to be responsive to the page size changes but it is not working. I have tried to change the place of the container in different div but it did not work.
I am using Bootstrap5
Here is the current output:
I am trying to get the numbers inside the container
here is the template:
<div class="container flex-grow-1 flex-shrink-0 py-5">
<div class="mb-5 p-4 bg-white shadow-sm">
<h1 class="text-center">Plan</h1>
<div id="stepper1" class="bs-stepper">
<div class="bs-stepper-header" role="tablist">
<!-- General Information -->
<div class="step active" data-target="#test-l-1">
<button
type="button"
class="step-trigger"
role="tab"
id="stepper1trigger1"
aria-controls="test-l-1"
aria-selected="true"
>
<span class="bs-stepper-circle">1</span>
<!-- <span class="bs-stepper-label">General Information</span>-->
</button>
</div>
<!-- Summary -->
<div class="step" data-target="#test-l-2">
<button
type="button"
class="step-trigger"
role="tab"
id="stepper1trigger2"
aria-controls="test-l-2"
aria-selected="false"
>
<span class="bs-stepper-circle">2</span>
<!-- <span class="bs-stepper-label">Summary</span>-->
</button>
</div>
</div>
</div>
</div>

You can use col class inside the div with a row class, for each button. It automatically adjusts the width for each button as per the width of the screen. Using col class, each div with button will occupy equal space. In our case since there are 10 button elements, with each occupying 10% of the whole width.
You can do it like this:
HTML:
<div class="container flex-grow-1 flex-shrink-0 py-5">
<div class="mb-5 p-4 bg-white shadow-sm">
<h1 class="text-center">Plan</h1>
<div id="stepper1" class="bs-stepper">
<div class="row mt-5 bs-stepper-header" role="tablist">
<div class="col d-flex justify-content-center" data-target="#test-l-1">
<button type="button" class="step-trigger" role="tab" id="stepper1trigger1" aria-controls="test-l-1" aria-selected="true">
<span class="bs-stepper-circle">1</span>
</button>
</div>
<div class="col d-flex justify-content-center">
<button>2</button>
</div>
<div class="col d-flex justify-content-center">
<button>3</button>
</div>
<div class="col d-flex justify-content-center">
<button>4</button>
</div>
<div class="col d-flex justify-content-center">
<button>5</button>
</div>
<div class="col d-flex justify-content-center">
<button>6</button>
</div>
<div class="col d-flex justify-content-center">
<button>7</button>
</div>
<div class="col d-flex justify-content-center">
<button>8</button>
</div>
<div class="col d-flex justify-content-center">
<button>9</button>
</div>
<div class="col d-flex justify-content-center">
<button>10</button>
</div>
</div>
</div>
</div>
</div>
You can add CSS as well:
button {
border: none;
display: flex;
padding: 5px;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 30px;
height: 30px;
}
You can through the official documentation here for more information about the Bootstrap grid system: https://getbootstrap.com/docs/5.1/layout/grid/
Demo sample: https://codepen.io/Hitesh_Vadher/pen/xxrdYYb

how to show divs in horizontal manner

hi I wants to show these columns in horizontal manner but these are showing in vertical manner ow can I change it;
blade file:
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
#foreach($category->products as $pro_data)
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div>

If I understand you correctly you are trying to show the products of the categories next to each other horizontally but you are seeing them vertically at the moment.
I think a proper way would wrap the foreach with your
<div class="col-lg-3 mb-4"></div> which gives us
<div class="row">
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</div>
</div>
#endforeach
</div>
Hope it helps!

#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
Hope this will work for.

I would float the divs to the left with some padding and use clearfix if needed.

All cards appeared in the horizontal manner because you might did't wrap them all without .row class
Because a set of css properties are applied to the .row class
Try the following approach:
<div class="row">
<div class="col-lg-3 mb-4">
</div>
</div>

Your code should be something like this. Added a row wrapper and col inside the loop. I assume <div class="col-lg-3 mb-4"> is your container for all cards.
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="row">
#foreach($category->products as $pro_data)
<div class="col">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div><!-- end of row -->
</div>

in bootstrap 4 you can use columns in horizontal manner. You did't wrap them all without use .row class this is most important class.
this is the right way if you use bootstrap 4
<div class="row">
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
</div>
#foreach($category->products as $pro_data)
<div class="row">
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
#endforeach

Let Button overlap div on bottom (CSS/Bootstrap 4 Grid)

I need your help in the following case - I just cant figure out a clean and simple way to solve it.
I want to realize the following design:
3 Boxes with content and overlapping buttons
But i struggle with pushing the buttons out of the divs because it expands the main div or I cant get them centered / positioned properly in mobile views. My current code looks like this (based on bootstrap 4 grid) (Light blue background is applied at the div with container-fluid class in the 2nd row)
<section id="threeblocks" class="">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<a class="btn btn-darkblue align-self-baseline" href="#" role="button">Mehr erfahren</a></div>
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<a class="btn btn-darkblue align-self-baseline" href="#" role="button">Mehr erfahren</a></div>
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<a class="btn btn-darkblue align-self-baseline" href="#" role="button">Mehr erfahren</a></div>
</div>
</div>
</div>
</section>
I was thinking about adding three aditional cols underneath the div with the background, but then there are problems with responsive views, where the buttons should be in the boxes again and not underneath all three off them.
So this dirty solution would look like this:
<section id="threeblocks" class="">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
</div>
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
</div>
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col"><a class="btn btn-darkblue align-self-baseline pushback" href="#" role="button">Mehr erfahren</a></div>
<div class="col"><a class="btn btn-darkblue align-self-baseline pushback" href="#" role="button">Mehr erfahren</a></div>
<div class="col"><a class="btn btn-darkblue align-self-baseline pushback" href="#" role="button">Mehr erfahren</a></div>
</div>
</div>
</section>
So any idea how to get them to this position where I can change the position for different breakpoints?
Thanks in advance!

Here's a solution, where the buttons are inside the three boxes, but have absolute positioning that forces them to spill outside the bottom of the div by around half.
<section id="threeblocks" class="">
<div class="container-fluid">
<div class="container">
<div class="row">
<div id="box1" class="col p-5 d-flex flex-column headlineBox">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<button>lorem ipsum</button>
</div>
<div id="box2" class="col p-5 d-flex flex-column headlineBox">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<button>lorem ipsum</button>
</div>
<div id="box3" class="col p-5 d-flex flex-column headlineBox">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<button>lorem ipsum</button>
</div>
</div>
</div>
</div>
</section>
CSS
.headlineBox button{
background-color: #466f75;
color: #fff;
position: absolute;
bottom: -10px;
margin:0 auto;
display:block;
}
#box1{
background-color: #e6f4f6;
}
#box2{
background-color: #d8eef1;
}
#box3{
background-color: #e6f4f6;
}
Codepen https://codepen.io/Washable/pen/bYwGzR