Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

How do I center an image to a container when using a grid system??

Hey guys,

So I have been put in charge of developing my wife's day spa web site and I am having some problems with aligning Flexbox perfectly in the center of a container that I have named ""contentArea""

I am using the ""grid.css"" that was included in the Smells Like Bakin' web site project.

Here is a link to what I currently have. As mentioned above I would like the flex box to be placed in the center of the ""contentArea"" which uses the ""grid_12"" class. Don't worry those images that appear on the flex slider aren't final we've hired a pro photographer to do the shots.

I would really appreciate any advice on how I could go about this as I am stumped.

Many thanks

Stu :)

5 Answers

Matthew Reed
PLUS
Matthew Reed
Courses Plus Student 17,986 Points

You have to take the grid_11 class off of the flexslider div. It's causing it to float left. Then add this to your css

.flex-viewport {
    width: 880px;
    margin: 0 auto;
}

You Matthew are an absolute champion! I have been stressing over this so much!

This solved the problem perfectly, thank you!

Stu :D

I do have one more question that I 100% that you'll be able to help me with Matthew looking at your impressive amount of points.

How does one make a background color for lets say grid_12 fill 100% of the browser width, this is the next problem that I'm having at the moment.

Thanks

Stu :)

Matthew Reed
PLUS
Matthew Reed
Courses Plus Student 17,986 Points

No problem, Stu. I'm glad I could help. If you want it the background color you will 100% of the browser you just have to apply it to the body or something eles that is 100%. I'm guessing your grid container is not 100% width. I would maybe put a div around it and give it the background color you want.

Thanks again Matthew,

That works a treat, thanks for your quick response too btw :)

Stu