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 Robert Cooper
Robert Cooper
6,507 Points

Any help with my CSS for this?

I'm pulling my hair out learning RWD.

http://www.blinkbysecretlashes.co.uk/?ModPagespeed=off

This clients holding page looks okay in landscape but all the portrait versions chop off the models face instead of scaling the image down. Unfortunately the logo is part of the main image and I cant get it separately.

I don't understand why the image seems to scale nicely until it gets to about 800 pixels wide then starts cropping instead. I can't see anything in the (simple) CSS that would cause this. Unless is something bootstrap does that I dont fully understand yet?

If anyone can help I would really appreciate it.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

If you try changing the background position to center center. It would respond by always keeping it centered and therefore look better in smaller devices.

1 Answer

Robert Cooper
Robert Cooper
6,507 Points

Thanks Adam,

I've tried that but I've still got the same problem that the image is now cropped (therefore cutting off the logo) rather than just nicely shrinking down :(

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Try this 

    .main-image {
      display: block;                       // Added This lIne
      max-width: 100%;                 // Added max- before width
      height: 98%;
      background-image: url(/img/landscape2.jpg);
      background-position: left top;
      background-size: cover;
}

Now the logo is scaling too

Robert Cooper
Robert Cooper
6,507 Points

Thanks Adam,

I've tried that but that breaks the whole thing I'm afraid. The image now resizes and disappears.

I'll post this on stack overflow and see if anyone can help - my client is not happy and I'm totally stumped (due to my own lack of understanding of RWD)

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

If you can send me the whole project I will have a look into. Obviously omit any confidential information that may be in there. From my experience they are a little bit picky and rude on stackoverflow. Sacki2013@gmail.com

Robert Cooper
Robert Cooper
6,507 Points

Thanks Adam - That's very kind of you. I'll email now :)

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Great, will see what I can figure out.