Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Abdi Ahmed
Abdi Ahmed
7,151 Points
Posted by Abdi Ahmed
Abdi Ahmed
7,151 Points

How to make footer responsive and prevent text overflow.

Hello everyone! I'm trying to make my footer section responsive when the screen size is minimized. Here is the link to my website: http://abdiahmed.github.io/abdi-ahmed-portfolio/index.html

The code for the footer is as follows:

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; border-top: 5px solid #d0d0d0; color: #ccc; background-color: #6d808f; /width: 100%;/ /height: 300px;/ /height: 100%;/ overflow: none; }

and the responsive css file has:

@media screen and (min-width: 400px) {

body {

overflow: auto;
background-color: yellow;

}

/Responsive footer/

about-me {

float: left; font-size:1.2em; text-align: left; /margin: -5px 30px;/ width: 30%; }

social-icons {

/* float: left;*/ width: 30%; }

general-info {

/* float: right;/ font-size:1.2em; text-align: left; width: 30%; / margin: 0 30px 0 0; */ }

social-icons-container {

float: left; /width: 300px;/ width: 30%; margin: 0 30px; /background-color: yellow;/

  }

footer {

width: 100%;
height: 100%;

}

}

Many thanks in advance for your help.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Just made your code, display the right way, so you can see easier!

footer { 
font-size: 0.75em;
text-align: center; 
clear: both;
padding-top: 50px; 
border-top: 5px solid #d0d0d0;
color: #ccc; 
background-color: #6d808f; /width: 100%;/ /height: 300px;/ /height: 100%;/ overflow: none; }

and the responsive css file has:

@media screen and (min-width: 400px) {

body {

overflow: auto;
background-color: yellow;
}

/Responsive footer/

about-me {

float: left; font-size:1.2em; text-align: left; /margin: -5px 30px;/ width: 30%; }

social-icons {

/* float: left;*/ width: 30%; }

general-info {

/* float: right;/ font-size:1.2em; text-align: left; width: 30%; / margin: 0 30px 0 0; */ }

social-icons-container {

float: left; /width: 300px;/ width: 30%; margin: 0 30px; /background-color: yellow;/

  }
footer {

width: 100%;
height: 100%;
}
}
Baruch Velez
Baruch Velez
275 Points

Reading through your code I would suggest learning a little bit more about CSS and HTML before trying to make a RWD website, you're repeating a lot of your code by over-using IDs and not enough classes.

3 Answers

Abdi Ahmed
Abdi Ahmed
7,151 Points
Abdi Ahmed
Abdi Ahmed
7,151 Points

Hi Baruch

Thanks for the reply. I'm not sure I understand what you mean, I have 3 divs with ids in the footer - each with content, and one div used to center the content. Should I change the divs to classes?

Baruch Velez
Baruch Velez
275 Points

if the three divs have the similar CSS you they should all go in the same class so when you use the media queries to adjust the width for the screen size it'll be easier.

Here's a really good read on media queries and RWD: http://www.toptal.com/front-end/introduction-to-responsive-web-design-pseudo-elements-media-queries

Abdi Ahmed
Abdi Ahmed
7,151 Points
Abdi Ahmed
Abdi Ahmed
7,151 Points

@erdrag thanks for formatting!

Abdi Ahmed
Abdi Ahmed
7,151 Points
Abdi Ahmed
Abdi Ahmed
7,151 Points

@Baruch great article! The css for the divs is different, there are overlapping styles and I will incorporate them into a single rule that targets them all - so I will change them to classes. I try to use media queries sparingly, if the same effect can be achieved without using them. The website was created with a mobile first approach, but I decided to add more content to the footer. Thanks for your help, Baruch.