Footer looks different on my localhost compared with codepen

[piano0011]

Hey guys!

I have been trying to follow this tutorial on how to create a footer at :https://www.youtube.com/watch?v=FGBsGqn7ac8
and I thought there was a problem with the coding provided but when it looks correct in codepen though. This is very odd indeed because on my localhost, it doesn’t look correct.

Some of the displayed: inline-block does not work properly and my social icons is not placed accurately in the boxes: Are we allowed to upload a picture file here?

[Beverleyh]

on my localhost, it doesn’t look correct

Have you used a valid doctype in your web page? Not using a doctype (or using a different doctype) can cause unexpected things to happen to layouts.

Are we allowed to upload a picture file here?

You can upload an image to your own webhost and provide the link here, or, use a free service such as TinyPic.

I’m not sure that we’ll be able to diagnose much from an image though, but it depends on what the image is of.

[piano0011]

Hello! This is strange because I thought that I did reply earlier but I will add my whole css code because I think something is preventing my footer from staying at the bottom…

https://codepen.io/mervin-lee/pen/mQdBjo

As you can see from codepen, the footer appears in the middle and not at the bottom…..

[Beverleyh]

I will add my whole css code

Unfortunately that’s too much. It’s very unlikely that anybody here will want to poke through a ~3000 line CSS file in order to troubleshoot on your behalf. It takes too much time and time costs money. You should try to pare it back to the minimum amount possible while still demonstrating the problem – just very basic HTML and CSS pertaining to the immediate layout issue. That’s going to make it easier and quicker for us to look at in our free time.

The good news is that you’ve already identified that something extra in your own codebase is impacting on layout, over and above what the tutorial provides. This is a positive start. From here you can start with the tutorial code, and then introduce smaller logical blocks of your own code back in (HTML and CSS) until your layout breaks again. Do it bit by bit. This will point to the problem CSS and allow you to target it more directly. If at that stage you still need help in fixing the CSS, then we can look at the streamlined code again, and with the help of your guidance on which additional lines of CSS are breaking things.

[piano0011]

Hello!

I got another footer to work this time but I am using a position fixed. From what I have read so far, is it possible to use margin with it because I can’t get margin to work in my wrapper or footer but I can get it to work if I set a margin in that particular div class I want. I just thought that it would be easier to set margin-bottom to my wrapper and everything should be pushed down to give some spacing between the wrapper and footer…

[Beverleyh]

I imagine that you could put a bottom padding on your content in order to create an offset space for the footer but we’d have to see it in a demo to offer specific advice.

[piano0011]

I tried to put margin-bottom in the targeted div class but won’t work for my main wrapper. Should it work for the main wrapper class?

[piano0011]

I am also wondering… can you use margin for position fixed in the footer? Is there a way to give the footer margin-top?

[Beverleyh]

Should it work for the main wrapper class?

Don’t know. We’d need to see a basic demo of the problem.

can you use margin for position fixed in the footer? Is there a way to give the footer margin-top?

Not on fixed position elements. They’re pulled out of the flow of the document so other elements don’t see/interact with them. Please Google for more info.

[piano0011]

Hello!

I have been trying to follow this tutorial on how to make a sticky footer from this same website: https://css-tricks.com/couple-takes-sticky-footer/ but it still doesn’t work because my footer is in the middle of the page instead of the bottom:

This is my index.php page and I will just include the footer section:

&#9839

&#9838
&#9837

At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! We understand that as a busy mum, you might not have the time to take your child for piano lessons and also, it is a daunting process to find a good quality teacher. Put all of those thoughts aside because PianoCourse101 offers a complete course from the beginning to the advanced levels. It is based on “The Bastien Piano Basics Series” for children and for a limited time, students can watch the Primer Level lessons for free! If you would like to continue your lessons beyond Primer Level, you can opt to purchase our Level 1, Level 2, or Level 3 course.
Currently, the lessons are aimed primarily for children but there will be lessons for adults in the near future. We would appreciate if you could donate to our website if you are enjoying your learning experience with us. This will assist us in maintaining our website and to be able to upload more videos.
Mr Lee has over ten years of piano teaching experience and also has completed an educational degree and obtained a 4th year in psychology degree. We understand that learning the piano can be boring and hence, we are trying our best to make piano learning a fun and interactive experience for you and your child.
PianoCourse101 is located in Australia, Melbourne and all fees are in the AUD currency. Student will receive an invoice upon the completion of purchasing a course.

The acclaimed and at-times provocative feminist was one of three speakers on the panel ‘Too Dangerous’ alongside law professor Ayelet Waldman and Megan Phelps-Roper, who grew up in the controversial Westboro Baptist Church.

  

   
Enter your E-mail Address
 

   <br></br>
   

   

   Subscribe to PianoCourse101!
   



</form>
</div>


<img class="snoopy" src="includes/pictures/snoopy.jpg" alt="snoopy playing the piano" />

Services

  


     

       
Level 1
       
&#127929
       
Purchase the Level 1 Subscriptionplan!
Learn how to play the piano right from the comfort of your own home!
Monthly fee: $100
Yearly fee: $800
      

        

         
Level 2
        
&#127931
        
Purchase the Level 2 Subscriptionplan!
Learn how to play the piano right from the comfort of your own home!
Monthly fee: $150
Yearly fee: $1300
        

      

        
Level 3
        
&#127927
        
Purchase the Level 3 Subscriptionplan!
Learn how to play the piano right from the comfort of your own home!
Monthly fee: $200
Yearly fee: $1800
     

  </div>

There are visitors who have visited this page!

<?php
$sql = "SELECT * FROM review;";

$stmt = mysqli_stmt_init($conn);
//Prepare the prepared statement
if (!mysqli_stmt_prepare($stmt, $sql)) {
echo 'SQL statement failed';
} else {
//Bind parameters to the placeholder
//Run parameters inside database
mysqli_stmt_execute($stmt);
$result2 = mysqli_stmt_get_result($stmt);
$resultCheck2 = mysqli_num_rows($result2);

 while ($row2 = mysqli_fetch_assoc($result2)) {

  echo '
';
  echo ' '.htmlspecialchars($row2['review']).' '.htmlspecialchars($row2['user_uid']).' '.htmlspecialchars($row2['datesubmitted']).'';
  echo '
';

  echo '
';

}

}

?>

This is my css code:

.content {
min-height: 100%;
}

.content-inside {
padding: 20px;
padding-bottom: 50px;
}

.footer {
height: 50px;
margin-top: -50px;
background-color: #000;
position: relative;
bottom: 0;
}

but I can’t get it to go the bottom

[Beverleyh]

We won’t be able to troubleshoot your code dump due to the foo’d formatting (and remember that a basic demo in CodePen is preferred), but if the footer doesn’t work in the realm of your own codebase, it indicates that something in your code is breaking it. I can only cycle round to the previous advice offered further up the thread;

… start with the tutorial code, and then introduce smaller logical blocks of your own code back in (HTML and CSS) until your layout breaks again. Do it bit by bit. This will point to the problem CSS and allow you to target it more directly. If at that stage you still need help in fixing the CSS, then we can look at the streamlined code again, and with the help of your guidance on which additional lines of CSS are breaking things.

[piano0011]

My apologies.. I will use codepen in the future but have tried another footer tutorial that seems to work but am still having the same problem that I can’t move my footer to the bottom…

This is the codepen link and for some reason, it looks great on my page but in codepen, doesn’t quite look right..

https://codepen.io/mervin-lee/pen/jQEewj

I guess what I am trying to say is that I am happy with the code but just wondering how to move it to the bottom.. thanks!

[Beverleyh]

Looks like you’ve sorted your footer as a standalone entity but I don’t see any code in there that would suggest it being a sticky footer? If that’s your next step, try following one of the tutorials here to achieve that https://css-tricks.com/couple-takes-sticky-footer/ (I would personally go with the flexbox approach).

[piano0011]

I am confused here because my footer is on a separate page called footer.php and I have included it on all my other pages.. where should I put the wrapper? in the index.php or footer.php?

[Beverleyh]

Sounds like you’re working with template files. These normally contain HTML/code fragments, that when knitted together by the server, form the whole web page layout. So you’d disseminate the tutorial’s elements and put them into whatever template file was most appropriate. For example, an opening div of a master outer-wrapper element may go in a header file, and the closing div for it may go in the footer.

It seems like you’re really struggling with this though – you might want to consider hiring somebody.

[Author]

Posts