How can I turn a row of flex items into two columns? - css

Question

Hey friends I have a section on my webpage called services. This section contains 4 lists. Each list is wrapped in a div. Each div is a flex-item and has a flex basis of 25%. These 4 divs sit in a row. However when the screen size shrinks to 775px I want to take the last to lists and place them under the first two, creating two columns. I'm not that familiar with flexbox, how can I do this?
.content {
display: flex;
}
.content > .skills {
flex-basis: 25%;
margin-top: 15px;
margin-bottom: 15px;
}
<div class="content">
<ul class="skills">
<li>Flatwork</li>
<li>Paving</li>
<li>Driveways</li>
<li>Sidewalks</li>
</ul>
<ul class="skills">
<li>Foundations</li>
<li>Flooring</li>
<li>Seismic Retrofit</li>
<li>Other Concrete Concerns</li>
</ul>
<ul class="skills">
<li>Commercial</li>
<li>Residential</li>
<li>Decks and Patios</li>
<li>Kitchen Flooring</li>
</ul>
<ul class="skills">
<li>Demolition</li>
<li>Grading/Clean up</li>
<li>Slab Repair</li>
<li>Curb Repair</li>
</ul>
</div>

Answer 1

One solution would be to use responsive styling to apply flex-wrap: wrap; to .content and flex-basis: 50%; to .content > div when the display is less than your break-point of 775px.
This could be done by adding the following to your CSS:
/* Only applies the styling when screen is between 0px and 775px wide */
#media (max-width: 775px) {
.services .content {
/* Tells flex box to allow child elements to "wrap" onto next row if needed */
flex-wrap: wrap;
}
.services .content div {
/* Tells children of .content to occupy half of parents width, resulting in two columns */
flex-basis: 50%;
}
}
For a working demo, see the snippet below:
html,
body {
margin: 0;
padding: 0;
}
nav li a {
text-decoration-line: none;
color: rgba(102, 102, 102, 0.75);
}
.wrapper2 {
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
}
header {
background-image: url(../img/pexels.jpg);
background-position: center;
background-size: cover;
height: 65vh;
background-attachment: fixed;
background-repeat: no-repeat;
}
header h1 {
color: white;
margin: 0;
font-size: 5rem;
font-family: 'Montserrat';
font-weight: bolder;
}
nav {
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
}
nav ul {
margin-right: 0px;
margin-top: 25px;
}
nav li {
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
color: rgba(102, 102, 102, 0.75);
}
nav li a:hover {
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
}
.after:after {
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102, 102, 102, 0.25);
}
.logo {
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
}
/*---ABOUT---*/
.history h2 {
font-family: 'Rajdhani';
color: rgba(102, 102, 102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.history h2:after {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
}
.history h2:before {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
}
.history p {
color: rgba(102, 102, 102, 0.85);
font-family: 'Rajdhani';
font-size: 1.7rem;
text-align: center;
width: 90%;
margin-right: auto;
margin-left: auto;
margin-top: 35px;
position: relative;
top: -20px;
}
/*---SERVICES---*/
.services {
background-image: url(../img/pour.jpeg);
background-size: cover;
background-attachment: fixed;
}
.services .wrapper {
width: 100%;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
}
.services {
color: white;
font-family: 'Montserrat';
font-weight: bolder;
font-size: 3rem;
}
.services .content {
display: flex;
background-color: white;
}
.services .content div {
flex-basis: 25%;
margin-top: 15px;
margin-bottom: 15px;
}
.services ul {
color: red;
font-size: 1.8rem;
font-family: 'Rajdhani';
list-style-type: square;
margin-left: 50px;
margin-top: 0;
margin-bottom: 0;
}
.skills p {
margin: 10px;
}
.content .move {
align-self: flex-end;
}
/*---TESTIMONY---*/
.testimony {
background-image: url('../img/wall4.jpg');
display: flex;
justify-content: space-around;
background-attachment: fixed;
background-size: cover;
}
.testimony h1 {
margin-bottom: 20px;
margin-top: 20px;
color: white;
font-family: 'Arvo';
padding: 30px;
display: inline-block;
flex-basis: 40%;
margin-left: 30px;
}
.testimony span {
color: white;
font-size: 2.3rem;
}
.testimony .quote {
font-family: 'Rajdhani';
font-size: 1.2rem;
margin-left: 40px;
}
.testimony .left-quote {
position: relative;
left: 60px;
top: 30px
}
.fa-quote-right {
position: relative;
right: 35px;
top: 30px;
}
.testimony .move {
right: 68px;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
}
.footer div {
display: inline-block;
flex-basis: 29%;
font-family: 'Rajdhani';
color: rgba(102, 102, 102, 1);
margin-top: 5px;
justify-content: space-around;
}
.footer h1 {
font-size: 2rem;
margin-top: 15px;
}
.social .inner {
width: 100%;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 29%;
height: 2px;
background-color: rgba(102, 102, 102, 0.6);
position: absolute;
margin-top: 54px;
}
.footer h1 span {
display: inline;
position: relative;
}
.footer h1 span:after {
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
.wrap:before {
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
}
.links a {
display: block;
text-decoration-line: none;
color: rgba(102, 102, 102, 1);
font-size: 1.1rem;
position: relative;
top: -17px;
transition: color 0.4s ease;
}
.links a:hover {
color: red;
}
.contact p {
position: relative;
top: -10px;
}
.social i {
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102, 102, 102, 0.7);
transition: all 0.4s ease;
}
.social i:hover {
color: red;
cursor: pointer;
}
#msg {
margin-top: -15px;
}
.footer-textarea {
background-color: rgba(102, 102, 102, 0.2);
padding: 0;
outline: none;
font-size: 1.2rem;
color: rgba(102, 102, 102, 1);
resize: none;
width: 99.5%;
}
.footer button {
float: right;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
}
button:hover {
cursor: pointer;
color: red;
}
.dark {
color: red;
}
.copyright {
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
}
/*-------MEDIA QUERIES-------*/
#media screen and (min-width: 2460px) {
/*---NAV---*/
nav li {
font-size: 3rem;
}
.logo {
font-size: 8rem;
}
.after:after {
width: 3px;
height: 40px;
margin-left: 5px;
margin-right: 5px;
}
/*---MAIN---*/
header h1 {
font-size: 9rem;
}
.history h2 {
font-size: 6rem;
margin-bottom: 30px;
}
.history h2:before,
.history h2:after {
height: 4px;
width: 35px;
margin-bottom: 25px;
}
.history p {
font-size: 3.4rem;
}
.services h1 {
font-size: 8rem;
}
.services .wrapper {
height: 400px;
}
.services h2 {
font-size: 6rem;
}
.services h2:before,
.services h2:after {
height: 4px;
width: 35px;
margin-bottom: 25px;
}
.services li {
font-size: 3.5rem;
}
.services ul {
margin-left: 150px;
}
.testimony i {
font-size: 5rem;
padding-top: 30px;
}
.testimony h1 {
font-size: 2.7rem;
padding-bottom: 60px;
}
.testimony .quote {
font-size: 2.3rem;
}
/*---FOOTER---*/
.footer h1 {
font-size: 4.5rem;
padding-top: 15px;
}
.footer h1 span:after {
height: 4px;
}
.footer .inner:before {
height: 4px;
margin-top: 118.25px;
}
.links a {
font-size: 2.5rem;
top: -20px;
}
.social i {
font-size: 3.5rem;
margin-right: 10px;
top: -40px;
}
.footer button {
font-size: 2.5rem;
margin-right: 14.25%;
padding-left: 10px;
padding-right: 10px;
margin-top: -37px;
}
.footer textarea {
font-size: 2.5rem;
width: 85%;
}
.contact p {
font-size: 2.5rem;
margin-bottom: 35px;
margin-top: 35px;
}
.copyright {
font-size: 2.5rem;
}
}
#media screen and (min-width: 1901px) {
.footer button {
margin-left: 14%;
}
}
/*---LAPTOP-LARGE---*/
#media screen and (max-width: 1593px) {
.skills li {
font-size: 1.65rem;
}
.skills p {
font-size: 1.65rem;
}
}
#media screen and (max-width: 1497px) {
.skills li {
font-size: 1.5rem;
}
.skills p {
font-size: 1.5rem;
}
}
#media screen and (max-width: 1448px) {
.skills li {
font-size: 1.35rem;
}
.skills p {
font-size: 1.35rem;
}
}
#media screen and (max-width: 1440px) {
/*---FOOTER---*/
.footer button {
margin-left: 16.5%;
}
}
#media screen and (max-width: 1332px) {
.history p {
font-size: 1.5rem;
}
}
#media screen and (max-width: 1091px) {
.skills p {
font-size: 1.15rem;
}
}
/*---TABLET-LARGE---*/
#media screen and (max-width: 985px) {
.history h2 {
font-size: 2.5rem;
margin-top: 15px;
margin-bottom: 15px;
}
.history h2:before,
.history h2:after {
width: 15px;
margin-bottom: 11px;
}
.history p {
margin-top: 25px;
font-size: 1.4rem;
}
.services ul {
margin-left: 20px;
}
}
#media screen and (max-width: 924px) {
.logo {
font-size: 3rem;
}
nav li {
font-size: 1.4rem;
}
}
#media screen and (max-width: 829px) {
.footer .contact p {
font-size: 1rem;
margin: 3px;
}
.footer textarea {
font-size: 1rem;
}
}
#media screen and (max-width: 836px) {
.services ul {
margin-left: 5px;
}
}
#media screen and (max-width: 812px) {
/*---MAIN---*/
.history p {
font-size: 1.3rem;
}
.padding {
padding-top: 0px;
}
.testimony h1 {
font-size: 1.25rem;
}
/*---FOOTER---*/
.footer button {
margin-left: 8.5%;
}
.contact .inner {
margin-right: 20px;
}
}
/*---TABLET---*/
#media screen and (max-width: 768px) {
/*---MAIN--*/
header,
.wrapper2 {
height: 65vh;
}
.services ul {
font-size: 1.5rem;
margin-left: 30px;
}
.padding2 {
padding-top: 10px;
}
.testimony h1 {
font-size: 1.1rem;
}
.testimony .fa-quote-right {
display: none;
}
}
/*------LANDSCAPE-MODE-MOBILE------*/
#media screen and (max-width: 715px) {
/*---NAV---*/
nav ul {
padding-left: 0;
margin: 0;
}
nav li {
font-size: 1.4rem;
}
nav .logo {
font-size: 2.5rem;
}
/*---MAIN---*/
.history p {
font-size: 1.5rem;
}
.testimony {
flex-direction: column;
}
.testimony h1 {
margin-left: 30px;
font-size: 1.45rem;
}
.move-quote {
position: relative;
top: -30px;
}
.fa-quote-right {
position: absolute;
display: none;
}
.padding {
top: -35px;
}
}
#media screen and (max-width: 640px) {
header h1 {
font-size: 4rem;
}
.services h1 {
font-size: 3.5rem;
}
/*---FOOTER---*/
.footer h1 {
font-size: 1.5rem;
}
.footer .inner:before {
margin-top: 43px;
}
.links a {
font-size: 1rem;
top: -14px;
}
.social i {
font-size: 1.5rem;
margin-right: 2px;
top: -17px;
}
.footer button {
margin-top: -14px;
font-size: 1rem;
}
.footer textarea {
font
}
#media screen and (max-width: 626px) {
nav li {
font-size: 1.27rem;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102, 102, 102, 0.6);
position: absolute;
margin-top: 48px;
}
.footer h1 span:after {
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
}
.social .inner {
position: relative;
top: -10px;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102, 102, 102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 586px) {
/*---MAIN---*/
header h1 {
font-size: 3.5rem;
}
.services li {
font-size: 1.3rem;
}
.services ul {
padding: 0;
margin-left: 50px;
}
}
#media screen and (max-width: 568px) {
/*---MAIN---*/
header h1,
.services h1 {
font-size: 4rem;
}
.services li {
font-size: 1.1rem;
}
.services ul {
margin-left: 10px;
}
.padding {
padding-top: 10px;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100%;
height: 2px;
background-color: rgba(102, 102, 102, 0.6);
position: absolute;
margin-top: 48px;
}
.footer h1 span:after {
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
}
.social .inner {
position: relative;
top: -10px;
}
.social .inner:before {
width: 100vw;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102, 102, 102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 30px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 530px) {
nav li {
font-size: 1.27rem;
margin-right: 7px;
}
.after:after {
left: 5.5px;
top: 4px;
}
.logo {
margin-left: 15px;
}
}
#media screen and (max-width: 517px) {
/*---NAV---*/
nav li {
font-size: 1.1rem;
}
/*---MAIN---*/
header h1 {
font-size: 3rem;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102, 102, 102, 0.6);
position: absolute;
margin-top: 48px;
}
.social .inner {
position: relative;
top: -10px;
}
.footer h1 span:after {
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1.3rem;
margin-bottom: 0;
float: right;
margin-right: 25.5%;
position: relative;
top: 15px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 7px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102, 102, 102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-left: 5px;
margin-top: 0px;
position: relative;
top: 10px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media only screen and (max-width: 775px) {
.content {
flex-wrap: wrap;
}
.services .content div {
flex-basis: 50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | Kane Concrete & Construction</title>
<link rel="stylesheet" href="../css/about.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="wrapper2">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>About Us</h1>
</div>
</header>
<section class="history" style="background-color: white;">
<h2>Our History</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea magni suscipit modi sapiente. Perferendis odit, incidunt, amet adipisci, quaerat aperiam, impedit nemo excepturi culpa quis libero nostrum molestiae error eveniet ipsa repellat?
Cum quae laudantium totam neque provident fuga rerum quasi dolorum vel obcaecati quidem perspiciatis iure maiores dignissimos, recusandae enim error libero nobis inventore quo adipisci perferendis. Pariatur. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Possimus, dolor.</p>
</section>
<section class="services" id="services">
<div class="wrapper">
<h1>Services</h1>
</div>
<div class="content">
<div>
<ul class="skills">
<li>
<p style="color: rgba(102,102,102, 0.85);">Flatwork</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Paving</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Driveways</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Sidewalks</p>
</li>
</ul>
</div>
<div class="move">
<ul class="skills">
<li>
<p style="color: rgba(102,102,102, 0.85);">Foundations</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Flooring</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Seismic Retrofit</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Other Concrete Concerns</p>
</li>
</ul>
</div>
<div>
<ul class="skills">
<li>
<p style="color: rgba(102,102,102, 0.85);">Commercial</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Residential</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Decks and Patios</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Kitchen Flooring</p>
</li>
</ul>
</div>
<div>
<ul class="skills">
<li>
<p style="color: rgba(102,102,102, 0.85);">Demolition</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Grading/Clean up</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Slab Repair</p>
</li>
<li>
<p style="color: rgba(102,102,102, 0.85);">Curb Repair</p>
</li>
</ul>
</div>
</div>
</section>
<section class="testimony">
<div class="block">
<span><i class="fas fa-quote-left left-quote"></i></span>
<h1 class="first-quote">Most companys that I searched charged way too much, until I found Kane. They were fast, cheap, and very professional. I'm happy I chose them and will definitely keep them in mind for any other of my future projects.<span class="quote"> -Some Person</span></h1>
</div>
<div class="block">
<span class="move-quote"><i class="fas fa-quote-left left-quote"></i></span>
<h1 class="move-quote">I was very impressed with their work. They were cost effective and efficient and overall a good team. Saw a lot of synergy with their organization and others they worked with. They definitely know what they're doing.<span class="quote">-Some Person</span></h1>
</div>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
Home
About
Services
Careers
Contact
Quote
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send is some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>[phone] - <span class="dark">Matt</span></p>
<p>[phone] - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>