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

JavaScript Treehouse Club - MASH MASH - CSS Connecting Our Style Sheets

Hannah Dickey
Hannah Dickey
5,986 Points

Problem with placement of pictures

While editing the MASH code to make it my own I decided to change the logo to a picture of mine. How do I get the picture to shrink and become centered on my page?

Hi Hannah,

Are you doing this in workspaces? If so, you can post a snapshot of your workspace which will make it easier to help you.

https://teamtreehouse.com/forum/workspace-snapshots

Ramune Freze
Ramune Freze
1,851 Points

I've added in style.css in class selector .logo img extra line named width: 900px. It helped for me.

1 Answer

Armand van Alphen
Armand van Alphen
16,969 Points

Resizing


You can shrink the image by adding height: and width: in the image tag and adjust them accordingly


Positioning


In the first example here under you can leave margin-right but then it will not be exactly in the center;

You can center an image by using position: relative; left: 50%; margin-right: /50% of your image width in px or ems/

Or margin-left: auto; margin-right: auto;


Use a selector


I advise you to use the class selector as shown in the videos Also if this is the only place you need this specific style you can use ID="id_name" in html And #id_name{} inside css. but id's aren't made to reuse styles because they are primary used by JavaScript to select a specific element.