width doesn't change in css - html

Question

hello I have made a pop up effect in css it is a div that contains two floating divs the first one width is 34.8% of the main pop up and the second one is 65%
now I want to change the design of the whole pop up once the screen get smaller so I used a media query to change the width and rearrange the elements ;however it won't change I think its because of the float thing here is the code please help
<div class="overlay"></div>
<div class="popup">
<div id="itemphoto">
<img src="../images/stuff%20for%20sale/1.jpg" alt="none">
<p id="itemtitle">IPhone 6s</p>
</div>
<div id="itemdesc">
<p><span>Seller :</span> 116825349</p>
<p><span>Seller Rate :</span> Trusted</p>
<p><span>Lower Bid : </span>250</p>
<p><span>Bidders :</span> 30</p>
<p><span>Higher Bid : </span>366</p>
<p><span>Brief Description :</span> SAN FRANCISCO — September 9, 2015 — Apple® today announced iPhone® 6s and iPhone 6s Plus, the most advanced iPhones ever, adding a powerful new dimension to iPhone’s revolutionary Multi-Touch™ interface. The new iPhones introduce 3D Touch, which senses force to enable intuitive new ways to access features and interact with content. iPhone 6s and iPhone 6s Plus feature Retina® HD displays made from the strongest glass on any smartphone and 7000 series aluminum, the same alloy used in the aerospace industry, in gorgeous metallic finishes that now include rose gold.</p>
</div>
<button id="bid">BID</button>
<button id="notify">NOTIFY ME</button>
<button id="close">CLOSE</button>
</div>
.popup
{
width: 70%;
height: 550px;
background: #292929;
z-index: 1001;
position: fixed;
top :10%;
left: 15%;
border-radius: 15px;
/* display: none; */
}
.popup #itemphoto
{
width: 34.8%;
margin-right: 0.2%;
height: 450px;
float: left;
border-top-left-radius: 15px;
overflow: hidden;
background: #EFF1F2;
}
.popup #itemdesc
{
width: 65%;
height: 450px;
float: left;
border-top-right-radius: 15px;
padding: 20px;
overflow-y: scroll;
background: #EFF1F2;
}
/*media queries*/
#media screen and (max-width:1000px)
{
.popup
{
width:80%;
left: 10%;
}
#itemphoto
{
float: none;
width: 100%;
}
}

Answer 1

change your media query to:
.popup #itemphoto {
float: none;
width: 100%;
}
As it's more specific than #itemphoto, it's keeping the properties of the main css, changing it to this will make it apply correctly.
https://jsfiddle.net/h5wbjcsq/