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 Kirsten Lubkert
Kirsten Lubkert
5,515 Points

Unable to center my gallery in mobile view

I cannot get my gallery and navigation to center when using a mobile view. I have tried so many different things! It is my personal website that I used based on the beginning "how to create a website" track.

Let me know if anyone can help!!

Website: www.kirstenlubkert.com

eddie
eddie
8,289 Points

Your best bet might be to wrap your page's body in a container div, and style that div with margin: 0 auto; (or make the 0 something else if you like). Also give it a text-align: center; if you need to center the contents inside.

#container {
  margin: 0 auto;
  text-align: center;
}

<div id="container">
  Place page contents here.
</div>
Kirsten Lubkert
Kirsten Lubkert
5,515 Points

I have a wrapper div and nothing seems to change when I adjust the margin and text align as suggested by Eddie.

Any other suggestions?

1 Answer

rydavim
rydavim
18,814 Points

Adding a width of 100% to the wrapper div solved most of the display issues for me.

#wrapper {
    width: 100%;
    max-width: 940px;
    overflow: hidden;
    float:left;
}

You've got a margin style in your gallery list items rule that is going to end up putting lopsided padding on those elements I think. You'll probably want to use some type of nth-child selector to do the spacing in between so you don't have that 2.5% to the left of the lefthand elements.

ul.gallery li {
    display: inline-block;
    padding: 10px;
    margin: 0 0 2.5% 2.5%; /* This one here! */
    width: 40%;
    font-size: 16px;
    font-size: 1rem;
    vertical-align: top;
    background-color: #EBEBEB;
    height: auto;
}

Your design work is really lovely. :)