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

Amanda Bater
Amanda Bater
7,686 Points
Posted by Amanda Bater
Amanda Bater
7,686 Points

Swapping a video to an image for mobile devices

What is the best way to swap a video to an image for mobile devices?

I have a hero video playing across the top of my site and for mobile/iPad I'd rather display a still image. I've tried creating a media query for handheld but this didn't work, then I read that 'handheld' is often not recognised by a lot of devices...

Any other way I can do this?

Ezequiel Gonzalez
Ezequiel Gonzalez
1,358 Points
Ezequiel Gonzalez
Ezequiel Gonzalez
1,358 Points

are you sure the media query is being executed, for example turning background to other color just to see it works? I think might be useful if you post the css file here or even better in github

3 Answers

Amanda Bater
Amanda Bater
7,686 Points
Amanda Bater
Amanda Bater
7,686 Points

Just tried that and nothing happened. I'm trying to view it on an iPhone if that helps, in Safari. I have removed the media query now as it didn't seem to work, but here is my code...also have taken the image I want to use out of the code as I wasn't sure where to put it.

Thanks for the help.

https://w.trhou.se/km4epqnqt0

Ezequiel Gonzalez
Ezequiel Gonzalez
1,358 Points
Ezequiel Gonzalez
Ezequiel Gonzalez
1,358 Points

I am assuming this is the media query for the mobiles

@media (min-width: 769px) {
/* all your css stuff here */
}

if that is right, I think the min-width you set does not match any of the iPhone devices, the dimensions you set are bigger then the physical device... that might explain why the media query did not execute at all. check this out: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Finally I use a chrome tool named Window Resizer an that might help to you to test some media queries directly on your development system, so you can set the dimensions of the window and see the width/height value when media query occurs

Amanda Bater
Amanda Bater
7,686 Points
Amanda Bater
Amanda Bater
7,686 Points

I've designed in mobile first, so that's not actually the media query for mobile devices, the media queries are for scaling up to larger browser sizes. In your opinion, how would you approach creating a media query that targets handheld devices only? The link you sent was very useful, but I don't want to have to put in break points for every kind of smart phone and tablet. I think I need to look at this fresh tomorrow! Thanks!