bir kap div içindeki herşey

Ben bir kap sınıfı ile bir div yarattı ve içindeki tüm içeriğe sahip duyarlı olmaya almaya çalışıyorum. Daha sonra medya sorguları kullandım ve içindeki her şeye sahip olan konteynere% 100 genişlik ayarlıyorum. Bazı nedenlerden dolayı sadece bir bölüm cevap veriyor.bir kap div içindeki herşey

HTML:

<head> 
    <title>UI/UX Design Portfolio | Rafael Caba</title> 
    <link rel="shortcut icon" href="favicon.jpg"> 
    <link rel="stylesheet" href="style.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="keywords" content="UI UX design, Visual Design, Web Design, HTML, CSS"> 
    <meta name="description" content="UI UX Design Portfolio"> 
</head> 
    <div class="project4-container"> 

<section class="sketch"> 
    <p class="sketch-text">Sketch<p> 
     <div> 
      <img src="http://i.imgur.com/TPtZjzl.jpg"> 

        <img src="http://i.imgur.com/vl3WGnr.jpg"> 
     </div> 
</section> 


<section class="userflows"> 
    <p class="sketch-text">User Flows<p> 
     <div> 
      <img src="http://i.imgur.com/t6CS7cg.jpg"> 
          <div style="margin-top:50px;"></div> 
        <img src="http://i.imgur.com/VW9ii4V.jpg"> 
     </div> 
</section> 

<section class="wireframes"> 
    <p class="wire-text">Wireframes</p> 
    <div> 
     <img src="http://i.imgur.com/2jRqo5V.jpg"> 
     <img src="http://i.imgur.com/CnIv0Wq.jpg" class="project-margin"> 
     <img src="http://i.imgur.com/JFi18km.jpg" class="project-margin"> 
     <img src="http://i.imgur.com/L3SbBeg.jpg" class="project-margin"> 
     <img src="http://i.imgur.com/WNxNxwn.jpg" class="project-margin"> 
     <img src="http://i.imgur.com/pCfk4OZ.jpg" class="project-margin"> 
     <img src="http://i.imgur.com/qmsAb5t.jpg" class="project-margin"> 
     <img src="http://i.imgur.com/wdL5nhH.jpg" class="project-margin"> 
       <img src="http://i.imgur.com/emCHs7V.jpg" class="project-margin"> 
       <img src="http://i.imgur.com/SNCVpUf.jpg" class="project-margin"> 
     <div class="space"></div> 
    </div> 
</section> 

<section class="project4"> 
    <p class="mock-text">Mockups</p> 
    <div> 
     <img src="http://i.imgur.com/V4a8F0w.jpg"> 
     <img src="http://i.imgur.com/u6xRuKS.jpg" class="project-margin"> 
     <img src="http://i.imgur.com/wpNgzza.jpg" class="project-margin"> 
     <img src="http://i.imgur.com/N3u07hA.jpg" class="project-margin"> 
     <img src="http://i.imgur.com/l5vVy09.jpg" class="project-margin"> 
      <a href="#top" class="top-page">Back to top of page</a> 
     <div class="space"></div> 
    </div> 
</section> 

</div>

CSS:

@media screen and (max-width:640px){ 

    div.headertitle{ 
     width:100%; 
    } 

    nav ul{ 
     width:99%; 
    } 

    nav ul li{ 
     padding-right:0; 
     margin-left:5.5%; 
    } 

    .projects{ 
     width:100%; 
    } 

    section.sketch{ 
     width:100%; 

    } 

    section.sketch img{ 
     width:100%; 
     margin:0; 
    } 

    section.sketch p{ 
     margin-left:0; 

    } 

    section.sketch-mobile{ 
     width:100%; 
    } 

    section.sketch-mobile img{ 
     width:100%; 
     margin:0; 
    } 

    section.sketch-mobile p{ 
     margin-left:23px; 
    } 

    .about-section{ 
     width:90%; 
    } 

    .about-section p{ 
     width:100%; 
     margin-top:10%; 
    } 

    .about-section img{ 
     width:90%; 
     margin:0 auto; 
     margin-top:15%; 
    } 


     .project4-container{ 
     width:100%; 
     background-color:red; 

} 








}

jsfiddle - https://jsfiddle.net/qdhcnpq0/

kaynak

2016-03-19 Ralphunreal

sorun görüntülerdir. Sen max-width

CSS kullanmayı deneyebilirsiniz: O keman içinde ancak gerçek bir telefonlarından görüntülemekte gelmez nedense çalışır

img { 
     max-width: 100%; 
}

DEMO

kaynak

2016-03-19 20:07:23 Ferrrmolina

. Ben viewport için kafasında meta etiketi de var, bu ne olabilir? – Ralphunreal

Belki bir kaskat sorunu. Medya biti dosyasını dosyanın sonuna koyun. Sorunun doğru olup olmadığını görmek için soruya meta etiketi de koyun :) – Ferrrmolina

Yukarıdaki soruya meta etiket ekledim, oyu görebiliyorum. Ayrıca, dosyanın sonunda medya sorgularını nereye koymalıyım? – Ralphunreal

bir kap div içindeki herşey

cevap

İlgili konular