I'm trying to place 3 images on the same row using flexbox. I also want to change the size of the first image as it is too big. However, my CSS rules are not being applied properly. I have the images each inside their own div with a class of flex-item-3 to indicate that they are flex items inside my flex container. However, I can't seem to override the default CSS rules.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: 'Lato', 'sans-serif', 'arial';
color: #fff;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.wrapper {
max-width: 100%;
margin: 0 auto;
}
section {
padding: 80px 0;
}
h2 {
margin: 0;
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("img/truck.jpg");
background-size: cover;
background-position: center;
}
.flex-item {
padding-top: 15px;
height: 100vh;
}
.item1 {
padding-top: 0;
padding-left: 30px;
}
.logo {
height: 90px;
}
.main-nav ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.main-nav a {
color: white;
padding: 1rem;
text-decoration: none;
}
.main-nav a:hover {
color: orange;
}
.hero {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
}
.hero a {
text-decoration: none;
color: white;
display: block;
margin: 10px;
padding: 10px;
border-radius: 10px;
}
.btn {
background-color: orange;
}
.flex2 {
display: flex;
justify-content: center;
align-items: center;
}
.flex-item-2 {
color: #312c2c;
width: 100%;
text-align: center;
}
.second-flex-item p {
margin-top: 20px;
margin-bottom: 40px;
font-size: 19px;
color: #312c2c;
}
.second-flex-item h2 {
font-weight: 900;
font-size: 25px;
}
.flex-3 {
display: flex;
justify-content: center;
max-width: 100%;
}
.flex-3-items {
display: flex;
width: 100%;
height: auto;
}
<body class="wrapper">
<header class="flex">
<div class="flex-item item1">
<img src="Resources/img/moBurgerzLogo.png" class="logo">
</div>
<nav class="flex-item main-nav">
<ul>
<li>Our Story</li>
<li>Locations</li>
<li>Menu</li>
<li>Order now</li>
</ul>
</nav>
<div class="hero">
<h2>Best Burgers <br> In DA City(D.C)</h2>
<a href="#" class="btn" btn-full>Order now!</a>
<a href="#" class="btn" btn-ghost>View Menu!</a>
</div>
</header>
<section class="flex-2">
<div class="flex-item-2 second-flex-item">
<h2>Established in 2017 in D.M.V</h2>
<p class="story"> moBurgerz was founded in 2017 by owner Mahamed Ibrahim.<br> Since then we have been serving the best hand crafted burgers in the D.M.V.<br>All our meat is halal and all of our ingridients are organic.</p>
<img src="Resources/img/white_truck.jpeg" class="truck-img">
</div>
</section>
<section class="flex-3">
<div class="flex-3-item meal-photos photo-1">
<img src="Resources/img/cheeseSteak.jpg">
</div>
<div class="flex-3-item meal-photos">
<img src="Resources/img/goodMoanin.jpeg">
</div>
<div class="flex-3-item meal-photos">
<img src="Resources/img/moGul.jpeg">
</div>
</section>
</body>
.flex-3-item img { max-width:100%; } should do the trick.
Also, look at this: Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
Try this
.logo {
width: 100%;
height: auto;
}
Related
I'm working on a project and my CSS doesn't seem to be cascading correctly.
I have set some styles (mainly the color property) at the HTML tag level. However it is not cascading to the rest of my elements, specifically the .logo class, but also some other classes. Can anyone help me understand why this is happening?
Here is my code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: Helvetica, Arial, sans-serif;
color: seashell;
background-color: black;
text-align: center;
font-size: 22px;
opacity: 0.9;
}
/* Header and Nav Bar */
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 69px;
width: 100%;
position: fixed;
top: 0;
z-index: 10;
border-bottom: 1px solid seashell;
}
.logo {
margin-left: 10px;
max-height: 50px;
}
.navigation {
display: flex;
list-style: none;
}
.navigation a {
padding: 15px;
}
.navigation a:hover {
text-decoration: none;
}
/******* Hero *******/
#hero {
background-image: url(/Images/img-mission-background.webp);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
top: 70px;
height: 700px;
width: 1200px;
margin: auto;
opacity: 0.8;
}
#hero h2,
h4 {
padding: 12px;
}
/***** Content ******/
.content {
position: relative;
top: 100px;
}
<!--******* Header ******* -->
<header class="header">
<img src="/Images/img-tea-cozy-logo.webp" alt="Tea Cozy Logo" class="logo" />
<ul class="navigation">
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</header>
<section id="hero">
<h2>Our Mission</h2>
<h4>
Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
</h4>
</section>
<section class="content">
<h1>Tea of the Month</h1>
</section>
This question already has answers here:
Understanding z-index stacking order
(1 answer)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 3 years ago.
attempting to make a simple layout and have hit a dead end. I am trying to make a page that perfectly fits the screen such that there is no scrolling what-so-ever. Basically, in the included code, I'd like to have the reddish title bar (at the top) display on top of the yellowish container. The height of the yellowish container is set to 100vh so as to span the height of the viewport. In this way, the page will be perfectly sized such that you will never need to scroll.
I think it has to do with the z-index...which I thought I understood up until this point. I've watched videos, read articles, and tried everything I could think of. My last resort is trying my luck online.
body,
html {
height: 100%;
margin: 0;
}
.bg {
background-color: rgb(171, 171, 175);
}
header h1 {
text-align: center;
position: relative;
margin: 0;
padding-top: 0.8rem;
background-color: coral;
}
.flex-container {
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-box {
border: solid 6px #e7c022;
border-radius: 0.8rem;
height: 45%;
background-color: rgba(128, 128, 128, 0.7);
}
.main-container {
position: relative;
z-index: 1;
height: 100vh;
width: 55vw;
max-width: 700px;
background-color: burlywood;
}
.code-container {
height: 80%;
align-items: center;
}
.key-container {
height: 20%;
align-items: center;
}
.key-code {
font-size: 20rem;
font-family: 'Yellowtail', cursive;
}
.key {
height: 30%;
width: 20%;
border: solid 4px #e7c022;
border-radius: 0.5rem;
text-align: center;
margin-bottom: 3rem;
font-size: 40px;
font-family: 'Share Tech Mono', monospace;
}
.key div {
margin-bottom: 0.2rem;
}
<div class="bg">
<header>
<h1>Titlebar</h1>
</header>
<div class="flex-container main-container">
<div class="content-box">
<div class="flex-container code-container">
<div class="key-code">
<span>65</span>
</div>
</div>
<div class="flex-container key-container">
<div class="flex-container key">
<div>a</div>
</div>
</div>
</div>
</div>
</div>
Do this if you want you navbar to always stick at the top.
body,
html {
height: 100%;
margin: 0;
}
.bg {
background-color: rgb(171, 171, 175);
}
header {
z-index: 11;
position: fixed;
width:100%
}
header h1 {
text-align: center;
position: relative;
margin: 0;
padding-top: 0.8rem;
background-color: coral;
}
.flex-container {
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-box {
border: solid 6px #e7c022;
border-radius: 0.8rem;
height: 45%;
background-color: rgba(128, 128, 128, 0.7);
}
.main-container {
position: relative;
z-index: 1;
height: 100vh;
width: 55vw;
max-width: 700px;
background-color: burlywood;
}
.code-container {
height: 80%;
align-items: center;
}
.key-container {
height: 20%;
align-items: center;
}
.key-code {
font-size: 20rem;
font-family: 'Yellowtail', cursive;
}
.key {
height: 30%;
width: 20%;
border: solid 4px #e7c022;
border-radius: 0.5rem;
text-align: center;
margin-bottom: 3rem;
font-size: 40px;
font-family: 'Share Tech Mono', monospace;
}
.key div {
margin-bottom: 0.2rem;
}
<div class="bg">
<header>
<h1>Titlebar</h1>
</header>
<div class="flex-container main-container">
<div class="content-box">
<div class="flex-container code-container">
<div class="key-code">
<span>65</span>
</div>
</div>
<div class="flex-container key-container">
<div class="flex-container key">
<div>a</div>
</div>
</div>
</div>
</div>
</div>
Welcome to SO!
Using position relative with z-index solved the issue on header
When you set position: relative on an element then you establish a new
containing block. All positioning inside that block is with respect to
it.
Setting z-index on an element inside that block will only alter its
layer with respect to other elements inside the same block.
body,
html {
height: 100%;
margin: 0;
}
.bg {
background-color: rgb(171, 171, 175);
}
header {
z-index: 11;
position: relative;
}
header h1 {
text-align: center;
position: relative;
margin: 0;
padding-top: 0.8rem;
background-color: coral;
}
.flex-container {
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-box {
border: solid 6px #e7c022;
border-radius: 0.8rem;
height: 45%;
background-color: rgba(128, 128, 128, 0.7);
}
.main-container {
position: relative;
z-index: 1;
height: 100vh;
width: 55vw;
max-width: 700px;
background-color: burlywood;
}
.code-container {
height: 80%;
align-items: center;
}
.key-container {
height: 20%;
align-items: center;
}
.key-code {
font-size: 20rem;
font-family: 'Yellowtail', cursive;
}
.key {
height: 30%;
width: 20%;
border: solid 4px #e7c022;
border-radius: 0.5rem;
text-align: center;
margin-bottom: 3rem;
font-size: 40px;
font-family: 'Share Tech Mono', monospace;
}
.key div {
margin-bottom: 0.2rem;
}
<div class="bg">
<header>
<h1>Titlebar</h1>
</header>
<div class="flex-container main-container">
<div class="content-box">
<div class="flex-container code-container">
<div class="key-code">
<span>65</span>
</div>
</div>
<div class="flex-container key-container">
<div class="flex-container key">
<div>a</div>
</div>
</div>
</div>
</div>
</div>
You need to set z-index for header. Ex:
header{
position: relative;
z-index: 9999
}
If you need your header should stick at the top of the screen. add positioning. ex:
header{
position: fixed;
top: 0;
width: 100%;
z-index: 9999
}
I am working on the Free Code Camp project for which you need to make a product landing page.
I have everything that I want already except for two things.
The navigation bar goes behind the hero header image
When the user scrolls down, I want the navigation bar to be hidden – it currently does not do this.
Here is my code:
#import "https://fonts.googleapis.com/css?family=Lato:400,700";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #eee;
font-family: 'Lato', sans-serif;
}
#page-wrapper {
position: relative;
}
li {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
/** global classes styling **/
.container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px black solid;
border-radius: 2px;
background: transparent;
cursor: pointer;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #eee;
}
#media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
#media (max-width: 650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo>img {
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
#media (max-width: 650px) {
.logo>img {
margin: 0 auto;
}
}
nav {
font-weight: 400;
background-color: white;
}
#media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
transition: top 0.1s;
/* Transition effect when sliding down (and up) */
}
nav li {
padding-bottom: 5px;
}
}
nav>ul {
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#media (max-width: 650px) {
nav>ul {
flex-direction: column;
}
}
#hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 300px;
margin-top: 50px;
}
#hero>h2 {
margin-bottom: 20px;
word-wrap: break-word;
}
#hero input[type="email"] {
max-width: 275px;
width: 100%;
padding: 5px;
}
#hero input[type="submit"] {
max-width: 150px;
width: 100%;
height: 30px;
margin: 15px 0;
border: 0;
background-color: #f1c40f;
}
#hero input[type="submit"]:hover {
background-color: orange;
transition: background-color 1s;
}
#media (max-width: 650px) {
#hero {
margin-top: 120px;
}
}
#features {
margin-top: 30px;
}
#features .icon {
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;
}
#media (max-width: 550px) {
#features .icon {
display: none;
}
}
#features .desc {
display: flex;
flex-direction: column;
justify-content: center;
height: 125px;
width: 80vw;
padding: 5px;
}
#media (max-width: 550px) {
#features .desc {
width: 100%;
text-align: center;
padding: 0;
height: 150px;
}
}
#media (max-width: 650px) {
#features {
margin-top: 0;
}
}
#aboutOurApp {
margin-top: 50px;
display: flex;
justify-content: center;
}
#aboutOurApp>iframe {
max-width: 560px;
width: 100%;
}
#pricing {
margin-top: 50px;
display: flex;
flex-direction: row;
justify-content: center;
}
#aboutOurCompany {
margin-top: 1px;
display: flex;
flex-direction: row;
justify-content: center;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3);
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
}
.product>.level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
text-transform: uppercase;
font-weight: 700;
}
.product>h2 {
margin-top: 15px;
}
.product>ol {
margin: 15px 0;
}
.product>ol>li {
padding: 5px 0;
}
.product>button {
border: 0;
margin: 15px 0;
background-color: #f1c40f;
font-weight: 400;
}
.product>button:hover {
background-color: orange;
transition: background-color 1s;
}
#media (max-width: 800px) {
#pricing {
flex-direction: column;
}
.product {
max-width: 300px;
width: 100%;
margin: 0 auto;
margin-bottom: 10px;
}
}
footer {
margin-top: 30px;
background-color: white;
padding: 20px;
}
footer>ul {
display: flex;
justify-content: flex-end;
}
footer>ul>li {
padding: 0 10px;
}
footer>span {
margin-top: 5px;
display: flex;
justify-content: flex-end;
font-size: 0.9em;
color: #444;
}
body {
background-color: white;
}
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: url("https://collectivecloud.org/wp-content/uploads/2019/12/iphone-410324_1280-1024x682.jpg");
/* Set a specific height */
height: 900px;
width: 1920px;
max-width: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 50px;
}
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-text button:hover {
background-color: #555;
color: white;
}
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="https://collectivecloud.org/wp-content/uploads/2019/07/image-1-350x200.png" alt="Collective Cloud logo (This is really my company by the way ust in case)" />
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#aboutOurApp">About Our App</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container">
<section id="hero" class="hero-image">
<div class="full-width">
<div class="hero-text">
<h1>Auto Build Websites</h1>
<p>Best app out there
</p>
<p style="padding: -100px;">
</div>
</div>
</div>
</section>
<p style="padding: 30px;">
<div class="container" id="features">
<section id="features">
<div class="grid" id="features">
<img src="https://cdn2.iconfinder.com/data/icons/weather-2-4/100/Weather_Set-07-512.png" height="200px" width="200" />
<div class="desc">
<h2 style="color: #0ac0ed;">SEO Optimization</h2>
<p>
Increases the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine
</p>
</div>
</div>
<div class="grid">
<img src="https://cdn2.iconfinder.com/data/icons/weather-2-4/100/Weather_Set-07-512.png" height="200px" width="200" />
<div class="desc">
<h2 style="color: #0ac0ed;">Responsive Design</h2>
<p>
Responsive web design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.
</p>
</div>
</div>
<div class="grid">
<img src="https://cdn2.iconfinder.com/data/icons/weather-2-4/100/Weather_Set-07-512.png" height="200px" width="200" />
<div class="desc">
<h2 style="color: #0ac0ed;">24/7 Support</h2>
<p>
We provide 24/7 full support to our customers who are always looking to improve their business.
</p>
</div>
</div>
<p style="padding: 30px;">
</section>
<section id="aboutOurCompany">
<img src="https://collectivecloud.org/wp-content/uploads/2019/07/image-1-350x200.png" width="350" height="200" alt="image-1" title="image-1" padding:50px>
<p>We at Collective Cloud, LLC offer a range of services that will improve your business and help your business have a better internet presence. We offer a pro website with features tailored to your business that will give you a competing edge in
your industry.</p>
</section>
<p style="padding: 30px;">
<section id="pricing">
<div class="product" id="tenor">
<div class="level" style="background-color: #3aa8fc;">Free App</div>
<h2>FREE</h2>
<ol>
<li>Contains Ads</li>
<li>Restricted Functionality</li>
<li>No Social Media</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="bass">
<div class="level" style="background-color: #3aa8fc;">Paid App</div>
<h2>$100</h2>
<ol>
<li>No Ads</li>
<li>Full functionality</li>
<li>Can Upgrade</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="valve">
<div class="level" style="background-color: #3aa8fc;">Pro App</div>
<h2>$200</h2>
<ol>
<li>No Ads</li>
<li>Premium Functionalities</li>
<li>Code-Level Support</li>
</ol>
<button class="btn">Select</button>
</div>
</section>
<section id="aboutOurApp">
<div id="video" style="text-align: center;">
<p style="padding: 30px;">
<h1>Checkout How it Works</h1>
<p style="padding: 90px;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/MWV45qb9nCQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<section id="hero">
<h1>Best Website Development App in the World</h1>
<h2>Don't miss out on any updates!</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input name="email" id="email" type="email" placeholder="Subscribe Now" required />
<input id="submit" type="submit" value="Get Started" class="btn" />
</form>
</section>
<footer style="align-content: center;">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Contact</li>
<li>About Us</li>
</ul>
<span>Copyright 2020, Collective Cloud, LLC</span>
</footer>
</div>
</div>
in your CSS add
position: relative;
left: -14px;
or just use
overflow: hidden; //it won't show at all
overflow: auto; //scrollbar will only show when content is more
I'm using the justify-content:space-between to horizontally distribute all elements equally across my header. This works fine until I add padding-right:20px to my nav links. It shifts my header h2 element to the right, making it uneven. How do I keep the padding but have my elements equally aligned? Help appreciated, thank you.
https://jsfiddle.net/2fr3L8zh/14/
HTML
<header>
<div id="header-wrapper">
<nav>
<a>Projects</a>
<a>About</a>
<a>Contact</a>
</nav>
<h2>EMMANUEL OJIJI</h2>
<p>SOCIAL MEDIA HERE</p>
</div>
</header>
<section id="intro">
<div id="intro-wrapper">
<h1>I'm Lorem Ipsum — a Birmingham -based Visual Designer with a passion and
a firm belief in considered and meaningful design.</h1>
</div>
</section>
CSS
html {
margin: 0;
padding: 0;
height: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
height: 100px;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
padding-left: 50px;
padding-right: 50px;
}
#header-wrapper {
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
padding-right: 20px;
}
#intro {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
#intro-wrapper {
display: flex;
text-align: center;
width: 50%;
}
#intro-wrapper h1 {
font-weight: 700;
font-family: 'Raleway', sans-serif;
font-size: 2.2em;
line-height: 60px;
color: #333;
}
Avoid the padding for the last element of the navigation:
nav a:not(:last-child)
html {
margin: 0;
padding: 0;
height: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
height: 100px;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
;
align-items: center;
padding-left: 50px;
padding-right: 50px;
}
#header-wrapper {
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a:not(:last-child) {
padding-right: 20px;
}
#intro {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
#intro-wrapper {
display: flex;
text-align: center;
width: 50%;
}
#intro-wrapper h1 {
font-weight: 700;
font-family: 'Raleway', sans-serif;
font-size: 2.2em;
line-height: 60px;
color: #333;
}
<header>
<div id="header-wrapper">
<nav>
<a>Projects</a>
<a>About</a>
<a>Contact</a>
</nav>
<h2>EMMANUEL OJIJI</h2>
<p>SOCIAL MEDIA HERE</p>
</div>
</header>
<section id="intro">
<div id="intro-wrapper">
<h1>I'm Lorem Ipsum — a Birmingham -based Visual Designer with a passion and a firm belief in considered and meaningful design.</h1>
</div>
</section>
My problem is regarding flexbox layout. Check the demo from modern browsers and Internet Explorer.
Code Snippet:
.features-section {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
-webkit-flex-flow: row wrap;
}
.features-section .custom-col-6 {
padding: 1em;
margin: 0;
align-self: center;
width: 50%;
box-sizing: border-box;
}
.features-section .not-for-mobile {
display: block;
}
.features-section .not-for-desktop {
display: none;
}
.features-section .feature-image {
height: 490px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.features-section .feature-image-1 {
background-image: url(https://images.unsplash.com/photo-1430806746135-4c9775bfea07?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f98a2e705cc92fdba353e0d973176aff);
}
.features-section .feature-image-2 {
background-image: url(https://images.unsplash.com/photo-1430806746135-4c9775bfea07?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f98a2e705cc92fdba353e0d973176aff);
}
.features-section .feature-image-3 {
background-image: url(https://images.unsplash.com/photo-1430806746135-4c9775bfea07?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f98a2e705cc92fdba353e0d973176aff);
}
.features-section .feature-image-4 {
background-image: url(https://images.unsplash.com/photo-1430806746135-4c9775bfea07?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f98a2e705cc92fdba353e0d973176aff);
}
.features-section .feature-item .item-header {
font-size: 0.857em;
text-transform: uppercase;
line-height: 2.8em;
color: black;
}
.features-section .feature-item .item-text {
color: #333;
line-height: 2.1em;
}
.features-section .feature-item i {
font-size: 3em;
}
.features-section .feature-style-1,
.features-section .feature-style-2 {
text-align: center;
}
.features-section .feature-style-1 p,
.features-section .feature-style-2 p {
padding: 0 60px;
}
.features-section .feature-style-3 {
text-align: left;
}
.features-section .feature-style-3 .icon-wrapper {
padding: 2px 20px 0 45px;
float: left;
}
.features-section .feature-style-3 .text-wrapper {
display: inline-block;
width: 80%;
padding: 0 35px 0 0;
}
.features-section .feature-style-4 {
text-align: right;
}
.features-section .feature-style-4 .icon-wrapper {
padding: 2px 45px 0 20px;
float: right;
}
.features-section .feature-style-4 .text-wrapper {
display: inline-block;
width: 80%;
padding: 0 0 0 35px;
}
<div class="features-section">
<div class="custom-col-6 feature-image feature-image-1"></div>
<div class="custom-col-6 feature-text">
<div class="feature-item feature-style-1">
<h4 class="item-header">multipurpose template</h4>
<p class="item-text">Would you like to pop in a CD and have a better quality of life, and even self improvement? There are three ways you can use music to accomplish this.</p>
</div>
</div>
<div class="custom-col-6 feature-image feature-image-2 not-for-desktop"></div>
<div class="custom-col-6 feature-text">
<div class="feature-item feature-style-2">
<i class="ion-ios-gear-outline"></i>
<h4 class="item-header">multipurpose template</h4>
<p class="item-text">Would you like to pop in a CD and have a better quality of life, and even self improvement? There are three ways you can use music to accomplish this.</p>
</div>
</div>
<div class="custom-col-6 feature-image feature-image-2 not-for-mobile"></div>
<div class="custom-col-6 feature-image feature-image-3"></div>
<div class="custom-col-6 feature-text">
<div class="feature-item feature-style-3">
<div class="icon-wrapper"><i class="ion-ios-gear-outline"></i>
</div>
<div class="text-wrapper">
<h4 class="item-header">multipurpose template</h4>
<p class="item-text">Would you like to pop in a CD and have a better quality of life, and even self improvement? There are three ways you can use music to accomplish this.</p>
</div>
</div>
</div>
CodePen
So, in IE all flex items are in one row, but I need every item to occupy half of the row.