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 Mark Nielsen
Mark Nielsen
777 Points

Issue with images in HTML/CSS

How do I make an image fixable with every pc-format.

My monitor is 1920x1080 and when I run the Website on my laptop, the images will be weirdly misplaced and zoomed in on.

/Mark

5 Answers

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Can you show the code? the website? or something. I can't possibly write you 100answers for the problem it could be : p

Mark Nielsen
Mark Nielsen
777 Points

How do I upload a picture?:-D

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Just use this service and post the link here :D

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Do you know how position absolute work? Your design or layout isn't responsive. This woudn't probably be for mobile either.

Nothing you can do with position absolute! Unless there is soemthing that scales, or one thing you could do is use media queries for the specific screen size and make all the planets smaller on that specific screen size. On mobile this wont work anyways because it's out of the scope. Unless you make it for mobile on orientation landscape that scroll.

I really recommend you to go throw HTML Basics, and CSS Basics. Well, basically got throw the front-end track, and do all the HTML and CSS courses. They are really helpful.

Hope that helps!

Mark Nielsen
Mark Nielsen
777 Points
Mark Nielsen
Mark Nielsen
777 Points

1920x1080 http://imgur.com/FecKKbt

and

1080x720 http://imgur.com/E7NFy2C

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Did you code that? I think that the elements are position absolute and so they are not responsive. Inspect the website with the developer tools, and inspect the element , the planets and see if the position is absolute, I'm pretty sure it is.

Mark Nielsen
Mark Nielsen
777 Points
Mark Nielsen
Mark Nielsen
777 Points

Yup, spent a whole night coding that... and a little more:P They are position absolute, I've tried with position normal, but it don't seem make any difference...

Mark Nielsen
Mark Nielsen
777 Points
Mark Nielsen
Mark Nielsen
777 Points

Thanks. But should I change the position to relativity or normal and would it help?

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Well, see, the problem with this is the amount of content , in this case planets, you want to display across the web browser.

You could adjust the planets to have different size on each screen size etc.. but the fact is that these planets are going to be horizontaly , as thats what you want, and there are many of them, which will take a lot of space. So no matter, what , it doesn't matter if it's absolute, inline block or whatever, because below the 1900px width or whatever it is, it will break anywas.

If you use inline block for example, or inline, the elemnts will stack below, so venus will be below sun etc..

What would i do is id make it bulletproof lol in the sense as id position this i don't know, you can do inline/inline-block, with each planet a class of earth and assigne a value there, margin, size etc.. padding.. and then make the universe or the div, that expands as much as it needs, but the overflow will be hidden, so you can scroll to the left or right.