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

Roy Jossfolk Jr.
Roy Jossfolk Jr.
3,981 Points

Responsive image

My site is www.FitTagApp.com

So far the site is coming out how we want it, only issue is my main image under the header I can not get to respond to different screen sizes. I am using Foundation to build the site with HTML5 and CSS3. I have tried multiple fixes and making sure the image is wrapped in a 12 column div, still won't work. Any ideas?

6 Answers

Matt Campbell
Matt Campbell
9,767 Points

Roy, I'm looking at the image under the red banner that has the phone and inspiring millions of changes bit.

Do you want that to span the width of the screen because on larger displays, the picture degrades.

Either way, get rid of the two divs before the image so you're left with this:

<div class="videocontent"><img src="../images/bg3.png"><div>

Then set the width of videocontent to 100%.

Now you can center it using percentages, set image width to 90% and margin as:

margin:0 10%;

That will give a 10% of viewport margin to either side, centering the image.This is an example because even at 90%, the image degrades.

If there's anything else I can help with, let me know. I'm not sure I'm even talking about what you were wanting to know. lol.

Roy Jossfolk Jr.
Roy Jossfolk Jr.
3,981 Points

Mathew,

I really appreciate this, it worked perfectly.

The only thing I did different is not use the 10% margin. My reasoning behind this is I feel more users may access this on a mobile device since a link from the app store would be bringing them here. The app store is mostly used on mobile.

I realize on large screens there is a blank space that is to the right of the image however I am willing to take the risk that most people are on a 15"-13" display or smaller and it looks fine on that. What are your thoughts?

Thanks again, this is something I had been tackling for a few days now a little bit at a time.

Matt Campbell
Matt Campbell
9,767 Points

Whack a media query at the bottom of your CSS Roy.

This should do it:

@media screen and (min-width:1200px){.videocontent{margin:0 10%;}} 

Don't worry about it looking out of whack here, once you get it all indented in your editor it makes more sense.

What this bit of code here is doing is this. When the screen is above a width of 1200px, add the margin:0 10% to the class of videocontent.

Here solves the issue of smaller screens. iPad, phones and most small laptops have a max resolution of 1024px. 17 inch monitors and 15 inch laptops start around 1280px. You have to be a bit careful as browsers adjust the resolution slightly so setting it to 1200px covers you. Of course, you may find some oddities on certain devices but we can't test every device on the planet and cater for 100% of people. Doing our best suffices.

Matt Campbell
Matt Campbell
9,767 Points

Write the image out like this:

<img src="the-image-source" max-width="100%"> 

Alternatively, do it in the CSS.

.class img{
max-width:100%;
max-height:100%;
}

What Matthew said. ^ The site looks great, btw.

Roy Jossfolk Jr.
Roy Jossfolk Jr.
3,981 Points

Thanks for the help, Mathew! It is responsive now but for some reason it won't take up the full width.

Thank you, Sharon!!

I will keep fiddling with it, let me know if you have any ideas. I really appreciate the help.

Matt Campbell
Matt Campbell
9,767 Points

Roy Jossfolk I'm in the middle of clearing garden sheds so haven't got a chance to check out your CSS but, I know it will be either the width is constrained by a container/parent element or there's margin.

Try:

.class img{width:100%;height:100%;margin:0;}

Basically, setting height and width to 100% will mean the element will try to consume 100% of the space the parent element/containing element, permits! Setting margin to 0 is just good practice to insure it butts right up to the edge of the containing element.

I'll get on my system in half an hour or so and have a quick look and message back.

Roy Jossfolk Jr.
Roy Jossfolk Jr.
3,981 Points

I will try that, thanks for the advice. The only weird thing about that is the image itself is 1,280 px in width already, it should have no issue at that screen size. I may have something else in my code stopping it from reaching its full height and width.

Matt Campbell
Matt Campbell
9,767 Points

Roy Jossfolk. Thought I'd pop this in the main thread as well in case you'd missed it.

Whack a media query at the bottom of your CSS Roy.

This should do it:

@media screen and (min-width:1200px){.videocontent{margin:0 10%;}} 

Don't worry about it looking out of whack here, once you get it all indented in your editor it makes more sense.

What this bit of code here is doing is this. When the screen is above a width of 1200px, add the margin:0 10% to the class of videocontent.

Here solves the issue of smaller screens. iPad, phones and most small laptops have a max resolution of 1024px. 17 inch monitors and 15 inch laptops start around 1280px. You have to be a bit careful as browsers adjust the resolution slightly so setting it to 1200px covers you. Of course, you may find some oddities on certain devices but we can't test every device on the planet and cater for 100% of people. Doing our best suffices.