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!

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

Davor Budimir
Davor Budimir
9,206 Points
Posted by Davor Budimir
Davor Budimir
9,206 Points

Responsive layout huge issues CSS

Hi everyone,

I'm having serious problems with positioning my top article image. On 1920x1080 screens it's perfect (image: http://prntscr.com/4eqb9d), however when resizing window layout breaks - image and text (http://prntscr.com/4eqbgx).

Could you please help me to fix this so text and image stays where it should be, without moving so much up, I tried so many things so far

LIVE: http://demo1798.helpjuice.com/questions/89711-How-to-get-better-in-providing-customer-Support

6 Answers

Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

Isn't suppose to .blog-header be nested in .inside-article-image ?

Davor Budimir
Davor Budimir
9,206 Points
Davor Budimir
Davor Budimir
9,206 Points

wow you're right, thanks so much

however I still have problems with image and title moving up http://prntscr.com/4eqr1p

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

p.s: sorry bad english.

Check your css code and search for .inside-article-image img:first-child {, see that there's margin-top: -223px; */ that's making your image be 223px off-set.

So, this css is working for the desktop experience, but for mobile it obviously will do shit hah What if you use your image as background-image and take off this margin-top?

Davor Budimir
Davor Budimir
9,206 Points
Davor Budimir
Davor Budimir
9,206 Points

let me try that way...

Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

Don't forget to use background-size: cover for your image cover all the div

Davor Budimir
Davor Budimir
9,206 Points
Davor Budimir
Davor Budimir
9,206 Points

everything works now.

Thanks Gabriel

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

You're welcome, good luck bro (=