Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Enhancing the Design With CSS Media Query Basics

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,007 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,007 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

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

Thanks a lot will do :)