CODEWITHSUNDEEP
htmlcss
Ralphunreal
Ralphunreal

Reputation: 193

Trying to get everything inside a container div to be responsive

I created a div with a container class and inside it I have all the content. I then used media queries and set a width of 100% to the container that has everything inside it. For some reason only one section is responsive however.

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/

Upvotes: 1

Views: 278

Answers (1)

Ferrmolina
Ferrmolina

Reputation: 2771

The problem are the images. You can try to use max-width

CSS:

img {
      max-width: 100%;
}

DEMO

Upvotes: 1

Related Questions