2016-05-29 6 views
0

こんにちは私はcssでポップアップエフェクトを作っています.2つのフローティングdivを含むdivです。最初の幅はメインポップアップの34.8%で、2番目の幅は65%です 画面全体が小さくなると全体のデザインを変更したいので、幅を変更して要素を並べ替えるためにメディアクエリを使用しましたが、変化しません。浮動小数点数のためにここにコードを入れてくださいCSSで幅が変更されない

.popup #itemphoto { 
    float: none; 
    width: 100%; 
} 

<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%; 
} 

} 
+0

ブートストラップなどを使用していますか? – LordNeo

+0

いいえ私はブートストラップを使用していません –

答えて

0
がにあなたのメディアクエリを変更

助けます#it​​emphotoよりも具体的なので、メインCSSのプロパティを保持しています。これを変更すると、正しく適用されます。

https://jsfiddle.net/h5wbjcsq/

+0

私はすでにそれを試みましたが動作しません –

+0

https://jsfiddle.net/h5wbjcsq/働くフィドル – LordNeo

+0

それはうまくいかず動作しません私のウェブサイトだが、ここで働いてくれてありがとう –

関連する問題