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 CSS Basics (2014) Enhancing the Design With CSS Media Query Basics

Stefan Cutajar
Stefan Cutajar
7,747 Points
Posted by Stefan Cutajar
Stefan Cutajar
7,747 Points

How are the images getting smaller when you resize the the browser and not overflowing?

Hi all, I've just completed the css basics course a few days ago and decided to practice a bit by try to build a small site by using some things that I learned, however i'm having an issue with media queries that the image don't gets resized like the video but give the overflow to scroll am I missing something or maybe I will learn how to this later in the front end track? Thanks and regards, Stefan

4 Answers

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

You can use a media query at the point where you notice the images lose their position, and change the image width again at that point. I'd recommend taking the CSS Layout Basics course to get a better understanding on how to really master this.

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

So you're saying that you want the image to adapt to the width of the browser window? That means its size is relative to the size of the browser window. For this, you can use the width decorator, e.g.

img{
width: 90%;
}

The above would give every image a width of 90% of the size of the browser window, and be adaptive to it. You can obviously change the width to whatever you prefer, but this shows a non-fixed size. You can set this to only occur in one of your media queries.

Stefan Cutajar
Stefan Cutajar
7,747 Points
Stefan Cutajar
Stefan Cutajar
7,747 Points

Thanks for your help it worked :) however I'm having trouble when using it to two images next to each other, When i resize the browser to smaller width the images loose their position and take a line each instead of getting smaller both

Stefan Cutajar
Stefan Cutajar
7,747 Points
Stefan Cutajar
Stefan Cutajar
7,747 Points

Thanks a lot will do :)