I am trying to make some space between images and text: How it works - Simple as 1, 2, 3. I have followed the instruction from the video but the clearfix is not working in my case, tried erasing and entering the same code over and over again but nothing works.
here is my code
</section>
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/2.jpg" alt="Simple italian pizza with cherry tomatoes ">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/3.jpg" alt="Chicken breast steak with vegetables">
</figure >
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo" >
<img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
<li>
<figure class="meal-photo">
<img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
And CSS
.clearfix {zoom: 1}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
I’m not sure what you’re expecting to happen here, but if you want to create space, the easiest way is probably to add padding-top to the element which contains the text. (I can’t be more specific as you haven’t shown us the full code.)
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li><a href="#">Food delivery</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">Our cities</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry </a>
<a class="btn btn-ghost" href="#"> Show me more </a>
</div>
</header>
<section class="section features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition-outline icon-big "></i>
<h3>100% organic</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/2.jpg" alt="Simple italian pizza with cherry tomatoes ">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/3.jpg" alt="Chicken breast steak with vegetables">
</figure >
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo" >
<img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
<li>
<figure class="meal-photo">
<img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
<section class="section-steps">
<div class="row">
<h2>How it works — Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<img src="resources/img/app-iPhone.png" alt="Omnifood app on iPhone" class="app-screen">
</div>
<div class="col span-1-of-2 steps-box">
<div class="works-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="works-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="works-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app"> <img src="resources/img/download-app.svg" alt="App Store button"></a>
<a href="#" class="btn-app"> <img src="resources/img/download-app-android.png" alt="Play Store button"></a>
</div>
</div>
</section>
</body>
</html>
CSS
/*
Orange color #e67e22
*/
/* ------------------------------------------- */
/* BASIC SETUP */
/* ------------------------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #5f5f5f;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.clearfix {zoom: 1}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* ------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ------------------------------------------- */
.row {
max-width: 1140px;
margin: 0 auto;
}
.section {
padding: 80px 0;
}
.box {
padding: 1%;
}
/*---------HEADINGS-------------------------*/
h1, h2, h3 {
font-weight: 300;
text-transform: uppercase;
}
h1{
margin top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 220%;
word-spacing: 4px;
letter-spacing: 1px;
}
h2{
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h3{
font-size: 110%;
margin-bottom: 15px;
}
h2:after{
display: block;
height:2px;
background-color: #e67e22;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}
/*---------PARAGRAPHS----------------------*/
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}
.box p{
font-size: 90%;
line-height: 145%;
}
/*---------ICONS----------------------*/
.icon-big {
font-size: 350%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/*---------BUTTONS-------------------------*/
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0,2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #e67e22;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #e67e22;
color: #fff;
}
/* ------------------------------------------- */
/* HEADER */
/* ------------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
margin-top: 20px;
height: 100px;
width: auto;
float: left;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
margin: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #e67e22;
}
/* ------------------------------------------- */
/* FEATURES */
/* ------------------------------------------- */
.long-copy {
margin-bottom: 30px;
}
/* ------------------------------------------- */
/* MEALS */
/* ------------------------------------------- */
.section-meals {
padding: 0;
}
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li {
display: block;
float: left;
width: 25%;
}
.meal-photo{
width: 100%;
margin: 0;
overflow: hidden;
background: #000;
}
.meal-photo img {
opacity: 0.7;
width: 100%;
height: auto;
transform: scale(1.15);
transition: transform 0.5s, opacity 0.5s;
}
.meal-photo img:hover {
transform: scale(1.03);
opacity: 1;
}
/* ------------------------------------------- */
/* HOW IT WORKS */
/* ------------------------------------------- */
.steps-box:first-child {
text-align: right;
padding-right: 3%;
margin-top: 30px;
}
.steps-box:last-child {
padding-left: 3%;
margin-top: 70px;
}
.app-screen{
width:40%;
}
.works-step{
margin-bottom: 50px;
}
.works-step:last-of-type {
margin-bottom: 80px;
}
.works-step div {
color: #e67e22;
border: 2px solid #e67e22;
display: inline-block;
border-radius: 50%;
height: 55px;
width: 55px;
text-align: center;
padding: 5px;
float: left;
font-size: 150%;
margin-right: 25px;
}
.btn-app img{
height: 50px;
width: auto;
margin-right: 10px;
}
Add padding-top or margin-top to section-steps.
Off Topic
@hiborija: when you post code on the forums, you need to format it so it will display correctly. (I’ve edited your posts above for you.)
You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
Thank you for formatting my code, I am absolute beginner. I can add padding but why CLEARFIX is not working?
What is it that you expect clearfix to do?
It is a method of clearing the floated content; there is nothing in your rule which would add extra space.
See
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.