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
Roy Jossfolk Jr.
3,981 PointsResponsive 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
9,767 PointsRoy, 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.
Matt Campbell
9,767 PointsWrite 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%;
}
Sharon Walls
9,234 PointsWhat Matthew said. ^ The site looks great, btw.
Roy Jossfolk Jr.
3,981 PointsThanks 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
9,767 PointsRoy 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.
3,981 PointsI 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
9,767 PointsRoy 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.
Roy Jossfolk Jr.
3,981 PointsRoy Jossfolk Jr.
3,981 PointsMathew,
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
9,767 PointsMatt Campbell
9,767 PointsWhack 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.