I'm trying to align content in a flex box centered (vertical and horizontal). In my example it works as long the screen is big enough.
Problems:
When the content is bigger than 100vh in the ".wrapper" class. The content will be cut of at the top.
When i set the ".wrapper" to "100vh" and I add the ".header" div, this div should be excluded from the "100vh" otherwise i will get a scrollbar for nothing.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>FlexBox</title>
<meta name="infoription" content="">
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f8f9fa;
font-family: Roboto,Helvetica,Arial,Lucida,sans-serif;
color: #55595c;
}
.wrapper {
display: flex;
justify-content: center;
align-content: center;
height: 100vh;
flex-wrap: wrap;
}
.content {
background-color: #ffffff;
max-height: 350px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
margin: 10px;
position: relative;
border: 1px solid #dfdfdf;
border-radius: 0.25rem;
}
.content:after {
/* background: none repeat scroll 0 0 transparent; */
bottom: 0;
content: "";
display: block;
height: 10px;
left: 50%;
position: absolute;
background: #55595c;
transition: width 0.4s ease 0s, left 0.4s ease 0s;
width: 0;
}
.content:hover:after {
width: 100%;
left: 0;
}
.thumb {
background-color: #55595c;
height: 150px;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.info {
padding: 10px;
text-align: justify;
}
/* Responsive layout - screen is bigger than 1000px wide */
#media (min-width: 1000px) {
.bodysize {
width: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div class="bodysize">
<div class="header">
<h1>Example Page</h1>
</div>
<div class="wrapper">
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[1]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[2]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[3]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[4]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[5]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[6]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[7]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[8]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[9]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Example pictures:
Problem 1 - scrollbar because of "height: 100vh;".
Problem 2 - content floating out of the browser top. also because of "height: 100vh;".
Questions:
1) How can I set a dynamic height so the wrapper always fills the rest of the available space?
2) If the content is smaller than than the wrapper height it should be centered vertical but if the content is bigger, there is not center needed.
Any ideas how I can fix this?
>>> SOLUTION <<<
I added the .bodysize, removed the height from the wrapper and added "flex-grow: 1" to the wrapper. .bodysize { display: flex; flex-flow: column; height: 100vh; }
Try to set height: auto; and max-height: 100vh; at your wrapper.
Otherwise, your wrapper always would have 100% height even having few elements inside. The scrollbar would should appear when the content exceeds 100vh.
.wrapper {
display: flex;
justify-content: center;
align-content: center;
height: auto;
max-height: 100vh;
flex-wrap: wrap;
}
Related
I am trying to make a web page with a two columns with one side having the main content and the other having extra stuff. But because I am using the float property to align the extra column to the left, it stacks horizontally but I want it to stack vertically.
My current code:
.topicheader {
padding: 2% 2%;
float: left display: block;
background-image: linear-gradient(to top, rgb(40, 40, 40), rgb(50, 50, 50));
font-size: 125%;
border-radius: 3px;
box-shadow: 0px 0px 15px 0px black;
}
.column.side {
z-index: 1;
width: 25%;
float: right;
}
<div>
<div class="def column side " ;>
<strong class="topicheader">About</strong>
<p style="color:white;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
</p>
</div>
<div class="def column side " ;>
<strong class="topicheader">About</strong>
<p style="color:white;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
</p>
</div>
</div>
I have tried using the vertical-align property but it does nothing.
What I want to happen
By using column you stack the columns vertically. By using row the columns are side-by-side.
.container {
display: flex;
flex-direction: column; /* stack vertically */
}
.column {
height: 50vh; /* half of view height */
}
/* for example some colors */
.column:first-child {
background-color: orange;
color: blue;
}
.column:last-child {
background-color: blue;
color: orange;
}
<div class="container">
<div class="def column side">
<strong class="topicheader">About</strong>
<p style="color:white;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
</p>
</div>
<div class="def column side">
<strong class="topicheader">About</strong>
<p style="color:white;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
</p>
</div>
</div>
Use clear: both; property.
.column.side{
clear:both;
}
I created this layout, its almost there but I'm struggling with the images and text beside it. I want the entire box to flex at the same time, to keep the images and text responding at the same time.
What am I doing wrong? I think I am suffering from a mental block because this is my first time using flex.
.container {
max-width: 1750px;
}
.venture,
#event-content,
#news-content {
background-color: #eaeaea;
color: #444;
}
.catch {
color: #fff;
text-align: center;
margin: 1vmin 0vmin 0vmin 0vmin;
padding: 20px 50px;
background-color: #3366cc;
}
.tagline {
margin-top: 5%;
text-align: center;
font-weight: bold;
font-size: 130%;
}
#news-content a:link,
#news-content a:hover,
#news-content a:visited {
text-decoration: none;
color: #444;
font-family: FG Font;
font-size: 2vmin;
}
#news-content .btn.btn-primary {
background-color: #3366cc;
font-family: Arial;
border-color: #3366cc;
}
#news-content .tag {
background-color: #ef8b1e;
display: inline-block;
padding: 5px;
border-radius: 0px 0px 5px 5px;
font-size: 1.5vmin;
font-family: FG Font;
}
#news-content .title {
padding: 25px 10px 0px 10px;
}
#event-content .date {
background-color: #ef8b1e;
font-family: FG Font;
font-size: 3vmin;
display: inline-block;
text-align: center;
}
.main-wrapper {
display: flex;
flex-wrap: nowrap;
height: 70vh;
align-items: stretch;
}
.main-wrapper>div {
width: 50%;
min-height: 50vh;
}
.hero-img {
display: flex;
}
.hero-img>div {
margin: 1vmin;
align-self: stretch;
flex-basis: 50%;
}
.info-section {
display: flex;
flex-direction: column;
align-items: stretch;
}
.info-section .media-section {
margin: 1vmin 0vmin;
}
.info-section .venture {
position: relative;
padding: 3vmin 3vmin 2vmin 3vmin;
}
.media-section>div {
display: flex;
flex-direction: row;
}
.media-section>div>div {
flex-basis: 50%;
}
#news-content {
margin-right: .5vmin;
}
#event-content {
margin-left: .5vmin;
}
#news-content,
#event-content {
max-height: 150px;
}
<div class="container">
<div class="main-wrapper">
<div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
</div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Air" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Helicopter" /></div>
</div>
</div>
<div>
<div class="info-section">
<div class="catch">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
</div>
<div class="media-section">
<div>
<div id="news-content">
<div class="tag">In the News</div>
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<a href="">
<div class="btn btn-primary">Link</div>
</a>
</div>
<div id="event-content">
<div class="date">
<div class="num">12</div>
<div class="month">DEC</div>
</div>
<div class="details">
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="venture">
<h2>Lorem ipsum dolor sit ametn<br>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam diam non mollis sollicitudin. Curabitur sed felis ac urna laoreet finibus nec eu sem. Fusce cursus tortor eget lectus lacinia, id blandit dolor ultrices. Aliquam pellentesque
venenatis turpis, a viverra ante tincidunt vel. Quisque dui orci, viverra id ipsum eget, dictum mattis ante. Aliquam pellentesque massa et euismod efficitur. Aliquam vestibulum velit et lobortis feugiat. Curabitur vulputate quam efficitur,
pellentesque ex quis, tincidunt orci. Donec magna est, ultrices nec pretium nec, porta id nisl. Mauris vitae magna ac sem pellentesque hendrerit. Donec elit justo, pulvinar id leo posuere, venenatis mattis nisl. Maecenas tristique augue ut
odio tincidunt aliquam. Nullam volutpat lobortis eros.</p>
<div class="tagline">LOREM IPSUM</div>
</div>
</div>
</div>
</div>
</div>
Not sure if that you want, the entire container in same column can be done like that :
<pre>
<div class="container">
<div class="main-wrapper">
<div>
<div class="info-section">
<div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
</div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Air" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Helicopter" /></div>
</div>
</div>
<div class="catch">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
</div>
<div class="media-section">
<div>
<div id="news-content">
<div class="tag">In the News</div>
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<a href="">
<div class="btn btn-primary">Link</div>
</a>
</div>
<div id="event-content">
<div class="date">
<div class="num">12</div>
<div class="month">DEC</div>
</div>
<div class="details">
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="venture">
<h2>Lorem ipsum dolor sit ametn<br>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam diam non mollis sollicitudin. Curabitur sed felis ac urna laoreet finibus nec eu sem. Fusce cursus tortor eget lectus lacinia, id blandit dolor ultrices. Aliquam pellentesque
venenatis turpis, a viverra ante tincidunt vel. Quisque dui orci, viverra id ipsum eget, dictum mattis ante. Aliquam pellentesque massa et euismod efficitur. Aliquam vestibulum velit et lobortis feugiat. Curabitur vulputate quam efficitur,
pellentesque ex quis, tincidunt orci. Donec magna est, ultrices nec pretium nec, porta id nisl. Mauris vitae magna ac sem pellentesque hendrerit. Donec elit justo, pulvinar id leo posuere, venenatis mattis nisl. Maecenas tristique augue ut
odio tincidunt aliquam. Nullam volutpat lobortis eros.</p>
<div class="tagline">LOREM IPSUM</div>
</div>
</div>
</div>
</div>
</div>
</pre>
I have implemented a layout using css Grid.
The left column should only scroll and the right one should be sticky or fixed.
It's working fine but the scrollbar break the design.
Can scrollbar be removed or any other solution?
I know that is native of the browser but what can I do? (I also tried to change the design but its now supported by Firefox)
.container {
height: 100vh;
display: grid;
grid-template-areas: "list content";
grid-template-columns: 150px 1fr;
grid-template-rows: auto;
color: white;
}
.container .list {
overflow: auto;
grid-area: list;
background-color: #131418;
padding: 20px;
}
.container .list .items {
margin-top: 15px;
display: block;
}
.container .content {
grid-area: content;
background-color: #15161b;
padding: 15px;
position: sticky;
}
<div class="container">
<div class="list">
<h5>
Items
</h5>
<div class="items">
<div class="item">
<small>User name</small>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
<small>Made by ...</small>
</div>
<div class="item" style="margin-top: 15px;">
<small>User name</small>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
<small>Made by ...</small>
</div>
</div>
</div>
<div class="content">
<h1>
Hello world
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
</div>
</div>
A possible solution is to improve scrollbar's look.
Take a look at
perfect-scrollbar for example.
Perfect-scrollbar will only be displayed when mouse is hover related DIV.
Demo screenshot
(Look at the right very tiny scrollbar)
author's JSFiddle demo
var ps = new PerfectScrollbar('.container');
Your code snippet resolved
var ps = new PerfectScrollbar('.list');
.container {
height: 100vh;
display: grid;
grid-template-areas: "list content";
grid-template-columns: 150px 1fr;
grid-template-rows: auto;
color: white;
}
.container .list {
overflow: auto;
grid-area: list;
background-color: #131418;
padding: 20px;
}
.container .list .items {
margin-top: 15px;
display: block;
}
.container .content {
grid-area: content;
background-color: #15161b;
padding: 15px;
position: sticky;
}
<link href="https://rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css" rel="stylesheet"/>
<script src="https://rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>
<div class="container">
<div class="list">
<h5>
Items
</h5>
<div class="items">
<div class="item">
<small>User name</small>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
<small>Made by ...</small>
</div>
<div class="item" style="margin-top: 15px;">
<small>User name</small>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
<small>Made by ...</small>
</div>
</div>
</div>
<div class="content">
<h1>
Hello world
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
</div>
</div>
I have a flexbox with two columns. The items need to stay in their specified columns but each item should be able to expand its height when the user clicks 'read more' on an item. The effect would be to increase the size of the flexbox rather than have items wrap to the next column.
Also the items text needs to be positioned 50% from the top of the item (due to background shading). I've attempted to position the text using absolute positioning but this means the text is overflowing the container.
Here's a JSFiddle: http://jsfiddle.net/2adxLja2/3/
$(document).ready(function() {
$("#expand").click(function() {
$("#readmore").removeClass("hidden");
});
});
.grid {
display: flex;
flex-flow: column wrap;
height: 450px;
}
.container {
position: relative;
border: 3px solid blue;
min-height: 150px;
width: 250px;
margin-bottom: 5px;
background-image: linear-gradient(to bottom, rgba(18, 59, 107, 0), rgba(18, 59, 107, 1) 50%, rgba(18, 59, 107, 1));
}
.filler {
height: 50%;
}
.item {
position: absolute;
top: 50%;
color: white;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="container">
<div class="filler">
<span> </span>
</div>
<div class="item" id="item1">
<span>Tile 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae
</span>
<button id="expand">Read more</button>
<span class="hidden" id="readmore">
sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
<div class="container">
<div class="item">
<span>Tile 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
<div class="container">
<div class="item">
<span>Tile 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
</div>
You can try playing with max-height of the text element in order to hide some part of it. Also no need to use position:absolute as you can simply consider margin-top.
Here is an example (I replaced the click with hover)
.grid {
display: flex;
flex-flow: column wrap;
height: 450px;
}
.container {
position: relative;
border: 3px solid blue;
min-height: 150px;
width: 250px;
margin-bottom: 5px;
background-image: linear-gradient(to bottom, rgba(18, 59, 107, 0), rgba(18, 59, 107, 1) 50%, rgba(18, 59, 107, 1));
}
.item {
margin-top: 30%;
color: white;
max-height: 50px;
overflow: hidden;
cursor:pointer;
transition:0.5s;
}
.item:hover {
max-height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="container">
<div class="item" id="item1">
<span>Tile 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae
sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
<div class="container">
<div class="item">
<span>Tile 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
<div class="container">
<div class="item">
<span>Tile 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
</div>
I'm trying to setup a section of my page with 3 columns using Flexbox.
The 3 columns are set up just fine, the issue I am having is with the section1 div not being as tall as the children elements.
I have tried height: auto, height:100%, overflow: auto, overflow:visible, etc. The only time the section1 div changes height is when I specifically state a pixel height. It seems as though the flexbox items are acting as floats so I tried a clear:both to no avail.
I have searched both stackoverflow and other sites and have not found an answer which leads me to believe it is something I am doing wrong with flexbox.
body {
background: lightgrey;
}
.body {
position: relative;
width: 75% /* 747.75px */;
margin: auto;
top: -3.5em;
background-color: white;
border-top: 3px solid #ff8400;
}
.top-border {
display: block;
position: relative;
top: 2em;
border-top: 1px solid #eef3f0;
width: 95%;
left: 2.5%;
}
.section1 {
position: relative;
display: flex;
justify-content: space-around;
top: 5em;
height: auto;
}
<div class="body">
<div class="top-border"></div>
<div class="section1">
<div class="what-i-do">
<img class="what-i-do-icon" src="images/what-i-do.png" />
<h1 class="what-i-do-title">What I Do</h1>
<p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
<p class="view-more-btn">View More</p>
</div>
<div class="development">
<img class="development-icon" src="images/development.png" />
<h1 class="development-title">Development</h1>
<p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
<div class="design">
<img class="design-icon" src="images/design.png" />
<h1 class="design-title">Design</h1>
<p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
</div>
</div>
See Relative positioning
Once a box has been laid out according to the normal flow or
floated, it may be shifted relative to this position. This is called
relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1
were not offset and B2 is not re-positioned after B1's offset is
applied. This implies that relative positioning may cause boxes to
overlap.
Here you don't want to shift a single box, you want it to push following content too. Then, you should use margins for that.
body {
background: lightgrey;
}
.body {
width: 75% /* 747.75px */;
margin: auto;
margin-top: -3.5em;
background-color: white;
border-top: 3px solid #ff8400;
}
.top-border {
top: 2em;
border-top: 1px solid #eef3f0;
width: 95%;
margin-left: 2.5%;
}
.section1 {
display: flex;
justify-content: space-around;
margin-top: 5em;
}
<div class="body">
<div class="top-border"></div>
<div class="section1">
<div class="what-i-do">
<img class="what-i-do-icon" src="images/what-i-do.png" />
<h1 class="what-i-do-title">What I Do</h1>
<p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
<p class="view-more-btn">View More</p>
</div>
<div class="development">
<img class="development-icon" src="images/development.png" />
<h1 class="development-title">Development</h1>
<p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
<div class="design">
<img class="design-icon" src="images/design.png" />
<h1 class="design-title">Design</h1>
<p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
</div>
</div>