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 Monica Anderson
Monica Anderson
3,621 Points

Hello, I have two questions regarding centering parts of my webpage.

Hello, I have two questions regarding centering parts of the fictitious company I created for my webpage. www.monikaandersondesign.com

  1. the gallery of buttons are slightly off center in mobile view as well as in desktop view. I have looked for any type of margin or padding issues and cannot find anything that would cause it to be slightly off center.
  2. How can I get the header to stretch all the way across the web page no matter how wide? Thank you so much! Monika

2 Answers

Benjamin Larson
Benjamin Larson
34,055 Points

Hi Monica,

Have you played around with the Chrome Developer tools at all? They are an amazing resource when you're stuck with these kinds of problems. Here's a link to one of NIck Pettit's short courses on using the Dev Tools: https://teamtreehouse.com/library/website-optimization

From a quick look, when your site is in mobile view, you have padding being applied to the #wrapper and to the unordered list containing your buttons that are causing them to be off center.

For your other question, as Justin suggested, trying using the new CSS3 background properties like 

background-size: cover;

or 

background-size: contain;

. You can read more about how they scale and transform your image here: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Let us know if you continue having trouble, I can look more at your code later.

Monica Anderson
Monica Anderson
3,621 Points

Thank you Ben, I watched that video before and I will watch it again. Thanks for the information about the wrapper too. I feel like I forgot everything I learned. I am sure it is just nerves. Thanks again. Monika

Justin Johnson
Justin Johnson
6,667 Points
Justin Johnson
Justin Johnson
6,667 Points

Something you could try for the header image is to remove the image and then use it as a background image. This way you can use background properties.

something like this

header { width: 100% background-image: url(background.jpg); background-size: cover; }

I am not a pro by any means, just trying to collaborate ideas and maybe this will work for you. Let me know if this helps! and gl

Justin Johnson
Justin Johnson
6,667 Points

i wanted to add a little bit more. This is the first time I have tried to assist someone with a problem, so i apologize if i am not able to communicate this very well or my idea does not work as this is also a learning experience for myself.

In addition to the code i mentioned above, for centering all of the content on the page, but having a header and footer that span the entire width of the page, it would be easily done by having the page divided into 3 parts. A header wrapper for the header, a content wrapper for all of the stuff in the middle of the page (between the header & footer) and a footer wrapper for the footer.

Having a <header> wrapper with the background styles i mentioned above, you can add "margin-left: auto" and "margin-right: auto" (without quotes of course). This will make your header centered on the page, and the other background styles i mentioned will cause it to span the entire width regardless of how far you zoom out, or how wide your screen/browser is.

i hope this helps you.
-Justin

Monica Anderson
Monica Anderson
3,621 Points

Thank you Justin you are doing great and I tried to use the background image - cover option but when the screen response with the webpage the type stretches. So I would have to separate the logo and the header. I could turn the logo into a jng to make it transparent or a svg but then I would have to make it stay on the left hand bottom corner and stay that way. Which I am not sure how to do yet.