Footer does not look like the tutorial footer

HTML-CSS
1

So I am trying to create a nice looking footer from a tutorial on youtube.

Now I have done everything that he does in that video I believe. It is this one:

But my footer does not look like that footer. The three ul-lists stands on top of each other, instead of horizontally, like they should do, and which they do in that video.

I will post a screenshot of how they look below and also a screenshot of how it looks in chrome. Where it is green for some weird reason.

Here is the code. HTML:


      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
          <title>CSS Footer Design</title>
          <link rel="stylesheet" href="https:/stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
          <link rel="stylesheet" href="stylesheet3.css">
      </head>
      <body>
       
       
       


       
    <main> 
    CONTENT    
    </main>

    <footer class="footer">
    <div class="footer-left">
 <img src="logo.png" alt="">
 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad blanditiis neque doloribus minus ut. Ut ullam adipisci quas illum placeat dicta eveniet quo ad, exercitationem, sed eaque, voluptates hic autem!
 </p>
 <div class="socials">
 <a href="#"><i class="fa fa-facebook"></i></a>
 <a href="#"><i class="fa fa-twitter"></i></a>
 <a href="#"><i class="fa fa-dribbble"></i></a>
 <a href="#"><i class="fa fa-youtube"></i></a>
 <a href="#"><i class="fa fa-tumblr"></i></a>
 </div>

</div>
<ul class="footer-right">

<li>
<h2>Product</h2>

<ul class="box">
<li><a href="#">Theme trial</a></li>
<li><a href="#">Plugins yes</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">HTML Template</a></li>
</ul>

</li>
<li class="features">
<h2>Useful Links</h2>

<ul class="box">
<li><a href="#">Blog</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#">Customer Service</a></li>
</ul>

</li>
<li>
<h2>Adress</h2>

<ul class="box">
<li><a href="#">Farmland</a></li>
<li><a href="#">Morning milk</a></li>
<li><a href="#">London</a></li>
<li><a href="#">United Kingdom</a></li>
</ul>

</li>

</ul>

<div class="footer-bottom"></div>
<p>All Rights reserved by</p>
</footer>

</body>
</html>

CSS:

*,*:before,*:after{
    box-sizing: border-box;
}

body{
    font-family: poppins;
    margin: 0;
    display: grid;
    font-size: 14px;
}

main{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
justify-content: center;
color: #9b9b9b;
line-height: 3.8;
font-size:80px;
text-transform: uppercase;
font-weight: bold;
}

footer{
    display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-flow: row wrap;
padding: 50px;
color: #fff;
background-color: #011c39;
}

.footer > *{
    flex: 1 100%;
}

.footer-left{
    margin-right: 1.25em;
    margin-bottom: 2em;
}

.footer-left img{
    width: 50%;
}

h2{
    font-weight: 400;
    font-size: 17px;
}

.footer ul{
    list-style:none;
    padding-left:0;
}
.footer li{
    line-height:2em;
}
.footer a{
    text-decoration: none;
}
.footer-right{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-flow: row wrap;
}
.footer-right > * {
    flex:1 50%;
    margin-right: 1.25em;
}
.box a{
    color: #999;;
}
.footer-bottom{
    text-align:center;
    color: #999;
padding-top: 50px;
}
.footer-left p{
    padding-right: 20%;
    color: #999;
}
.socials a{
    background: #364a62;
    width:40px;
    height:40px;
    display:inline-block;
    margin-right:10px;
}
.socials a i{
    color: #e7f2f4;
    padding: 10px 12px;
    font-size: 20px;
}

@media screen and(min-width: 600px){
    .footer-right > *{
        flex:1;
    }
    .footer-left{
        flex:1 0px;
    }
    .footer-right{
        flex:2 0px;
    }
}
@media (max-width: 600px){
    .footer{
        padding:15px;
    }
    main{
        font-size:55px;
    }
}

green
green866×894 49.2 KB
weird boxes
weird boxes1142×1022 38 KB

Name of the footer is footer.php. I am trying to open it with XAMPP-server.

2

try adding this css also in footer
flex-direction:row;

3

Hmm. Thanks for the input.

I tried to do that but it did not work. I pasted this:

footer{
display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
flex-flow: row wrap;
padding: 50px;
color: #fff;
background-color: #011c39;
display: flex;
flex-direction:row;
}
4

You need to have a space between and and the parentheses in the media query.

@media screen and (min-width: 600px)
5

Ah nice one. That one worked.

Why is that so important? I am not that familiar with media queries. I thought it was just there to keep the layout responsive when resizing the windows. But it is actually quite important for the main layout to work then as well?

Also please see my screenshot an let me know how I can close this blue area between the list/widget-items down to the margin and still have them intact like they are:

closing blue area
closing blue area1964×750 97.1 KB

Aligning them more to the image and social widgets to the left also.

6

The media query is part of the layout and because it is using a min-width rule it affects the layout on screen sizes above the min-width size, so the main layout or “desktop”.

I don’t have that gap when I test the code you posted, are you sure you didn’t add or change something?

7

Hmm now it looks great again.

By the way Lasjorg. Do you know if there is any disadvantages to have several css-files for the same project/website/app? Or can I have one for the footer and one for the header for example.

8

Another question I have is for when I remove the code in that says “Content”. Then all of a sudden it looks like this with the header on the top of the page:

top
top2542×1148 165 KB

How do I make the header stick to the bottom after I remove the word content? I want it to look like it did before but without the word content.

9

You should really only have one main CSS file unless you are using a preprocessor (like SASS/SCSS, etc.). At least at the component level. You might have a reset in another file or some baseline stuff, but not a CSS file for each component (unless using a preprocessor).

css-tricks: One, Two, or Three

Yes, because then the footer is the only element on the page and the default flow is left to right, top to bottom. That is just how it works.

You normally have enough content before the footer to where it is pushed down to the bottom of the page. In some cases you may not have enough content there are a few fixes for that, like a sticky footer.

10

Hmm ok cool. I will go try that now.

11

Perhaps you could take a look at the code in the thread here as well. I am not sure why it went haywire when I pasted the other stuff: Putting in a header that is HTML