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

General Discussion

Posted by troy beckett
troy beckett
12,035 Points

centering an image........

I'm currently learning media queries and I'm trying to centre a logo for a tablet sized browser. But I'm having some difficulty. Have a look at my codepen below:

http://codepen.io/tbeckett24/pen/FKeri

Skip right to the bottom of my code and take a look at my media query for max width: 1024px I'm trying to center the logo on the page. Have a look and if possible let me know what I'm doing wrong and options to solve it.

1 Answer

Ivan Uvarov
Ivan Uvarov
22,403 Points
Ivan Uvarov
Ivan Uvarov
22,403 Points

You should use different selector. At the beginning of CSS file you used '#logo-pic img' selector, and now when you assign styles to '.logo-image' they don't overwrite previous styles because first selector has higher specificity. This is one of the possible solutions:

#logo-pic img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

You can find more information about CSS specificity here.

troy beckett
troy beckett
12,035 Points

thanks alot for your answer it really helped. thank you for taking the time