Versuchen, alles in einem Container-div zu bekommen reagieren

Ich habe ein div mit einer Container-Klasse erstellt und darin habe ich den ganzen Inhalt. Ich habe dann Medienabfragen verwendet und eine Breite von 100% für den Container festgelegt, in dem sich alles befindet. Aus irgendeinem Grund reagiert jedoch nur ein Abschnitt.Versuchen, alles in einem Container-div zu bekommen reagieren

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/

Quelle

2016-03-19 Ralphunreal

Das Problem sind die Bilder. Sie können versuchen, max-width

CSS zu verwenden:

img { 
     max-width: 100%; 
}

DEMO

Quelle

2016-03-19 20:07:23 Ferrrmolina

Es ist in dieser Geige funktioniert, aber aus irgendeinem Grund es nicht wenn es auf einem tatsächlichen Telefon angezeigt wird. Ich habe das Meta-Tag auch im Kopf für das Ansichtsfenster, was könnte es sein? – Ralphunreal

Vielleicht ist es ein Kaskadenproblem. Legen Sie die Medienabfrage am Ende der Datei ab. Lege auch das Meta-Tag in die Frage, um zu sehen, ob es korrekt ist :) – Ferrrmolina

Ich habe das Meta-Tag zu meiner Frage oben hinzugefügt, damit oyu sehen kann. Auch wo am Ende der Datei sollte ich die Medienabfragen stellen? – Ralphunreal

Versuchen, alles in einem Container-div zu bekommen reagieren

Antwort

Verwandte Themen