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

Posted by David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

odd CSS media querie text-align effect

I am trying to center my footer. Before I put in my media querie everything centered correctly, after it only centers if the screen is fully maximized, its probably something simple but I would appreciate a 2nd pair of eyes on it. Here is the CSS:

            FOOTER
***************************************/
footer {
  text-align: center;
  margin: 0;
}

footer p {
  font-size:.8em;
}

footer img {
  margin-top:4em;
  text-align: center;
}

@media only screen              /*desktop styling */ 
and (min-width : 1224px) {
footer {

}

footer img {
    text-align: center;
}

@media only screen          /* iPad Styles */
and (min-width : 768px)
and (max-width: 1024px)
 {

}

7 Answers

thomascawthorn
thomascawthorn
22,986 Points

Sorry ignore that.. Closing } on desktop media query I think

Should fix it:

@media only screen              /*desktop styling */ 
and (min-width : 1224px) {
footer {

}

footer img {
    text-align: center;
}
}
thomascawthorn
thomascawthorn
22,986 Points
thomascawthorn
thomascawthorn
22,986 Points

Hi!

Are you talking about footer img?

If so, the instruction of text-align center will only be asserted when the screen is at a min-width of 1224px (fullscreen). To adjust, take 

footer img {
text-align: center;
{

outside the media query?

David Jarrin
PLUS
David Jarrin
Courses Plus Student 11,182 Points
David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

that was a good catch but the same thing seems to be happening

thomascawthorn
thomascawthorn
22,986 Points
thomascawthorn
thomascawthorn
22,986 Points

oh man! Can I ask why you've added footer img { text-align: center; } into the query? It's already aligned center outside the query :-)

David Jarrin
PLUS
David Jarrin
Courses Plus Student 11,182 Points
David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

oh, I forgot to take that out, I was just trying stuff to get it to work, when I take it out nothing changes, the footer still centers on full screen then not on a smaller screen.

David Jarrin
PLUS
David Jarrin
Courses Plus Student 11,182 Points
David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

ok figured it out, you were on the right track. On some code above the stuff I gave you I forgot to close a MQ. Thanks for the help!

thomascawthorn
thomascawthorn
22,986 Points

No worries

thomascawthorn
thomascawthorn
22,986 Points
thomascawthorn
thomascawthorn
22,986 Points

Ah okay. I have one more idea Is this the only bit of code acting on the footer? i.e. are there any sneaky declarations for images/text above that would text align-left?

To check: resize the browser to a smaller size (Where it breaks). Right click on the element which isn't positioned correctly and say inspect element (in firefox, probably the same for chrome). If you look at the css box on the right (firefox), it should give a whole list of css rules for that element. Each rule should also show the file the rule is coming from and the line of code. That might help you find out what's happening.