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 qvhwtionvt
qvhwtionvt
5,767 Points

HELP! Image gets cut off in portrait view on phones

I'm working on a project where I have two images, one scrolling underneath the other. The top image ("glasses") has fixed positioning and z-index=1. The other image ("quote") is left as is and is underneath the first. When I viewed the website in portrait orientation on my iPhone, the fixed glasses image gets cut off, while the quote image scales down and fits within the screen dimensions.

It works fine on desktop and in landscape orientation. I've tried setting the width of the glasses image to 100% and using media queries to target the phone width, but I haven't had much success. The glasses just get squeezed and lose their normal shape. I'd really appreciate any answers or suggestions.

Link to live project

6 Answers

Nathalie C
Nathalie C
2,594 Points
Nathalie C
Nathalie C
2,594 Points

could it be the css min-height of 100% on the image, which is preventing the image from scaling down any further? If it did scale down more to fit the width of the mobile device in vertical orientation it wouldn't be able to be min-height 100% as the image is not long enough.

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

Try this CSS

.glasses {
    position: fixed;
    top: 0;
    z-index: 1;
}
.glasses, .quote {
    display: block;
    margin: auto;
    width: 100%;
}

This isn't perfect though cause you can see the words when they are below the glasses image

Matthew Reed
Matthew Reed
Courses Plus Student 17,986 Points

Actually you dont need the display block and margin auto.

Matthew Reed
Matthew Reed
Courses Plus Student 17,986 Points

Actually you dont need the display block and margin auto.

Matthew Reed
Matthew Reed
Courses Plus Student 17,986 Points

You could try adding a background to the glasses image and add a padding bottom to possibly cover those words.

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

BTW I love the glasses thing. I wish I thought of that :)

qvhwtionvt
qvhwtionvt
5,767 Points
qvhwtionvt
qvhwtionvt
5,767 Points

I deleted the min-height and made both images have a width of 100% as you guys suggested. I ended up having to add an empty div into the HTML and then target it with a media query to create a cover for the words at the bottom. It's not the most elegant solution, but it works! Thank you both of your suggestions!

And thanks, Matthew :)

Nathalie C
Nathalie C
2,594 Points
Nathalie C
Nathalie C
2,594 Points

Hi Jessica, you've certainly cracked it, looks great on my phones, I love it! I like the colour palette too, nice and easy on the eye.

qvhwtionvt
qvhwtionvt
5,767 Points
qvhwtionvt
qvhwtionvt
5,767 Points

Thanks, Nathalie!