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

Posted by Aoi Asano
Aoi Asano
7,477 Points

Change the width for specific class in media query?

Hi all, I am working on responsive design for a page including embedded video from news (like FOX, abc), and I need help for this. For smaller screen (like tablet size) I want to change the width for container which includes embedded video by using media query, but somehow it does not allow me even though other aspects for the media query is working. I used (!important) and several different approaches, but it does not change at all. It'll be super great if you can troubleshoot with this situation! Here is the code for the video section.

<style>
.video{
            width:45%;
            margin-right:auto;
            margin-left:auto;
          }
 @media screen and (min-width:620px) and (max-width:940px;){
.VideoContainer > .video {width:100% !important;}
                    }
</style>
<body>
 <div id="wrapper" class="VideoContainer">
      <div class="video">
        <img src="images/abc-logo.png">
          <iframe src='http://abcnews.go.com/video/embed?id=11327662' width='400' height='379' style='border:none;' class="ActualVideoPlayer"></iframe>
          <br/><a href="http://abcnews.go.com/us">ABC US News</a> | <a href="http://abcnews.go.com/entertainment">ABC Celebrity News</a>
      </div>
<div class="video">
        <img src="images/necn-logo-new2.jpg">
        <EMBED SRC="http://www.necn.com/common/thePlatform/web_45/swf/flvPlayer.swf" flashvars="v=http://www.necn.com/common/thePlatform/PDK/CSN/vars.txt&overlayImageURL=http://www.necn.com/common/thePlatform/PDK/CSN/logo/necn.png&pluginAkamai=type=player" height="379" width="400" type="application/x-shockwave-flash" allowFullScreen="true" allowscriptaccess="always" bgcolor="#ffffff"></EMBED>
</div>
    </div>

</body>

Thanks in advance!

2 Answers

Calvin Nix
Calvin Nix
43,828 Points

Hey Aoi,

First off you have one small error in your code.

(max-width:940px;)

You do not need to have a ;.

This may be causing issues. Change this and let me know if you are still having issues.

Thanks,

Aoi Asano
Aoi Asano
7,477 Points
Aoi Asano
Aoi Asano
7,477 Points

It worked completely fine! Thank you so much, Calvin!

Calvin Nix
Calvin Nix
43,828 Points

Great! I'm glad to hear it is working!