css media queries why is contents showing outside div?

Question

this is my first attempt at doing media queries for responsive design so I am just a beginner at this. I have a wrapper called "skills-wrapper" that has 4 divs called "skills" lined up in a row so they are all in one line next to each other. when the screen shrinks down to 320px I want the 4 divs to be essentially form a square, two on top two on bottom. when it gets to 320px all 4 divs are still lined up in a row and are going outside the wrapper div. how do I make it to form a square like I want it to when the screen shrinks down to 320px?

FYI the code I put in the media queries does line up the "skills" divs the way I want it to but that's when the screen is in its normal size NOT when it shrinks down. That's how I came up with the code for my media queries. here is the code.

.skills-container {
  position: relative;
  width: 100%;
  height: 700px;
  background-color: #e1e1e1;
  margin-top: 0;
  padding: 0;
  bottom: 0;
}
.title.second {
  color: black;
  text-align: center;
  margin-bottom: 0px;
  padding-top: 40px;
  font-family: 'Raleway', sans-serif;
  font-size: 55px;
}
#underline-second {
  width: 500px;
  margin: 0 auto;
  border-bottom: 5px solid black;
  margin-bottom: 40px;
}
.skills-wrapper {
  position: relative;
  margin: auto;
  width: 1200px;
  height: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.skills {
  position: relative;
  width: 23%;
  height: 470px;
  margin-top: 10px;
  border-right: 4px solid black;
}
.skills.last {
  border: none;
}
.logo {
  width: 265px;
  height: 340px;
  margin-top: 10px;
}
.ion-social-html5 {
  text-align: center;
  font-size: 280px
}
.des {
  font-size: 25px;
  margin-top: 0px;
  color: black;
}
.ion-social-css3 {
  text-align: center;
  font-size: 280px
}
.ion-social-javascript {
  text-align: center;
  font-size: 280px
}
.ion-social-angular {
  text-align: center;
  font-size: 280px
}
@media all and (max-width: 320px) {
.skills-container {
  position: relative;
  width: 100%;
  height: 700px;
  background-color: #e1e1e1;
  margin-top: 0;
  padding: 0;
  bottom: 0;
}
.title.second {
  font-size: 18px;
  margin-bottom: 0;
}
#underline-second {
  border-bottom: 2px solid #0A0A0A;
  width: 200px;
  margin-bottom: 0
}
.skills-wrapper {
  position: absolute;
  margin: auto;
  width: 100%;
  height: 500px;
}
.lang {
  font-size: 40px;
}
.skills {
  float: left;
  width: 50%;
  height: 50%;
  margin-top: 10px;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-right: none;
}
.des {
  font-size: 14px;
}
}

<html>
<head>
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Carlos Elizondo</title>
  <link rel = "stylesheet" type = "text/css" href = "practice.css">
  <link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <link rel = "stylesheet" type = "text/css" href = "css/animate.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body>
<div class = "skills-container">
  <div id = "underline-second">
    <h1 class = "title second" id = "skills">Skills</h1>
  </div>
  <div class = "skills-wrapper wow bounceInUp" data-wow-duration="2s" data-wow-offset="280">
    <div class = "skills">
      <div class = "logo">
        <div class = "ion-social-html5 lang">
          <p class = "des">HTML5</p>
        </div>
      </div>
    </div>
    <div class = "skills">
      <div class = "logo">
        <div class = "ion-social-css3 lang">
          <p class = "des">CSS3</p>
        </div>
      </div>
    </div>
    <div class = "skills">
      <div class = "logo">
        <div class = "ion-social-javascript lang">
          <p class = "des">JAVASCRIPT</p>
        </div>
      </div>
    </div>
    <div class = "skills last">
      <div class = "logo">
        <div class = "ion-social-angular lang">
          <p class = "des">ANGULAR JS</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

because you are given width in pixel for **.skills-wrapper** — ADH - THE TECHIE GUY, Dec 22 '16 at 08:22
Because you gave it fixed width to `.skills-wrapper`. How should it look? — Ionut Necula, Dec 22 '16 at 08:24
but that width is outside the media queries. are you guys saying it should be a percentage as well in the original css? — Web-Student214, Dec 22 '16 at 08:28

Ionut Necula · Accepted Answer · 2016-12-22T08:32:59.223

When dealing with a fluid design you should avoid styling the elements width using px, instead use percentage unit. I also suggest you making use of max-width property instead of width in this case. Another suggestion would be to use min-height instead of height to avoid problems on mobile devices. I've modified your code a bit:

.skills-container {
  position: relative;
  width: 100%;
  height: 700px;
  background-color: #e1e1e1;
  margin-top: 0;
  padding: 0;
  bottom: 0;
}
.title.second {
  color: black;
  text-align: center;
  margin-bottom: 0px;
  padding-top: 40px;
  font-family: 'Raleway', sans-serif;
  font-size: 55px;
}
#underline-second {
  max-width: 500px;
  margin: 0 auto;
  border-bottom: 5px solid black;
  margin-bottom: 40px;
}
.skills-wrapper {
  position: relative;
  margin: auto;
  max-width: 1200px;
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.skills {
  position: relative;
  width: 23%;
  height: 470px;
  margin-top: 10px;
  border-right: 4px solid black;
}
.skills.last {
  border: none;
}
.logo {
  max-width: 265px;
  width: 100%;
  height: 340px;
  margin-top: 10px;
}
.ion-social-html5 {
  text-align: center;
  font-size: 280px
}
.des {
  font-size: 25px;
  margin-top: 0px;
  color: black;
}
.ion-social-css3 {
  text-align: center;
  font-size: 280px
}
.ion-social-javascript {
  text-align: center;
  font-size: 280px
}
.ion-social-angular {
  text-align: center;
  font-size: 280px
}
@media all and (max-width: 320px) {
  .skills-container {
    position: relative;
    width: 100%;
    height: 700px;
    background-color: #e1e1e1;
    margin-top: 0;
    padding: 0;
    bottom: 0;
  }
  .title.second {
    font-size: 18px;
    margin-bottom: 0;
  }
  #underline-second {
    border-bottom: 2px solid #0A0A0A;
    max-width: 200px;
    width: 100%;
    margin-bottom: 0
  }
  .skills-wrapper {
    position: absolute;
    margin: auto;
    width: 100%;
    height: 500px;
  }
  .lang {
    font-size: 40px;
  }
  .skills {
    float: left;
    width: 50%;
    height: 50%;
    margin-top: 10px;
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-right: none;
  }
  .des {
    font-size: 14px;
  }
}

<div class="skills-container">

  <div id="underline-second">

    <h1 class="title second" id="skills">Skills</h1>

  </div>

  <div class="skills-wrapper wow bounceInUp" data-wow-duration="2s" data-wow-offset="280">

    <div class="skills">

      <div class="logo">

        <div class="ion-social-html5 lang">
          <p class="des">HTML5</p>
        </div>

      </div>

    </div>

    <div class="skills">

      <div class="logo">

        <div class="ion-social-css3 lang">

          <p class="des">CSS3</p>

        </div>

      </div>

    </div>

    <div class="skills">

      <div class="logo">

        <div class="ion-social-javascript lang">
          <p class="des">JAVASCRIPT</p>
        </div>

      </div>

    </div>

    <div class="skills last">

      <div class="logo">

        <div class="ion-social-angular lang">
          <p class="des">ANGULAR JS</p>
        </div>

      </div>

    </div>

  </div>

</div>

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

i'd drop the code into a jsfiddle and play around with and

short codes can make this pretty simple, here's a post using them:

Nesting [su-column] inside [row] to get them to align neatly

that should force it into a square and you can see the results live on the fiddle

edited May 23 '17 at 10:30

Community

1
1

answered Dec 22 '16 at 08:27

Andy at Focallocal

176
1
12

score 0 · Answer 3 · answered Dec 22 '16 at 08:42

here is the media query code which you need to use, and don't include all properties in @media screen and (max-width : 320px){} just selected properties which you are changing for screen resolution of 320px and less.

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

.skills-container{
        width: 100%;
        height: auto;
 }
.title.second{
   font-size: 25px;
  }   
  #underline-second{
    width: 100%;
    border-bottom: 5px solid black;   
}
.skills-wrapper{
    width: 100%;
    height: auto;
 }
.skills{
    border-right: 4px solid yellow;
}

.skills.last{
    border: none;
}


.logo{
    width: auto;
    height: 340px;
    margin-top: 10px;
}

.ion-social-html5{
    text-align: center;
}

.des{
    font-size: 20px;
    word-wrap:break-word;
}

}

Check this jsFiddle

score 0 · Answer 4 · answered Dec 22 '16 at 08:49

This must be what actually you need. codepen.io

or you can insert this in your sublime and check if this actuall is;

 <html>

 <head>
      <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
      <title>Carlos Elizondo</title>    
      <link rel = "stylesheet" type = "text/css" href = "practice.css">

      <link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

      <link rel = "stylesheet" type = "text/css" href = "css/animate.css">

      <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
      <style>
         .skills-container {
    position: relative;
    width: 100%;
    height: auto;
    background-color: #e1e1e1;
    margin-top: 0;
    padding: 0;
    bottom: 0;
}

.title.second{
   color: black;
   text-align: center;
   margin-bottom: 0px;
   padding-top: 40px;
   font-family:'Raleway', sans-serif;
   font-size: 55px;

}

#underline-second {
    width: 100%;
    margin: 0 auto;
    border-bottom: 5px solid black;
    margin-bottom: 40px;
    display: inline-block;
}

.skills-wrapper {
    position: relative;
    width: 100%;
    display: block;
}
.skills {
    width: 24.8%;
    height: auto;
    border: 1px solid #000;
    display: block;
    position: relative;
    float: left;
}

.skills-wrapper.wow.bounceInUp:before, .skills-wrapper.wow.bounceInUp:after {
    clear: both;
    display: block;
    content: "";
}
.logo {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.ion-social-html5{
    text-align: center;
    font-size: 280px
}

.des{
    font-size: 25px;
    margin-top: 0px;
    color: black;
}

.ion-social-css3{

    text-align: center;
    font-size: 280px
}

.ion-social-javascript{

     text-align: center;
    font-size: 280px
}

.ion-social-angular{

     text-align: center;
    font-size: 280px
}

@media (max-width: 768px){
    .skills {
    width: 49.3%;
    height: auto;
    border: 1px solid #000;
    display: block;
    position: relative;
    float: left;
}
.ion-social-html5,
.ion-social-css3,
.ion-social-javascript,
.ion-social-angular {
    font-size: 70px;
    padding: 30px 0;
}
.des {
    margin-top: 15px;
    font-size: 18px;
}
}


      </style>


    </head>
<body>      

       <div class = "skills-container">

            <div id = "underline-second">

               <h1 class = "title second" id = "skills">Skills</h1>

            </div>

            <div class = "skills-wrapper wow bounceInUp" data-wow-duration="2s" data-wow-offset="280">

                <div class = "skills">

                    <div class = "logo">

                        <div class = "ion-social-html5 lang">
                          <p class = "des">HTML5</p>
                        </div>

                    </div>    

                </div>

                <div class = "skills">

                    <div class = "logo">

                        <div class = "ion-social-css3 lang">

                          <p class = "des">CSS3</p>

                        </div>

                    </div>

                </div>

                <div class = "skills">

                    <div class = "logo">

                        <div class = "ion-social-javascript lang">
                          <p class = "des">JAVASCRIPT</p>
                        </div>

                    </div>

                </div>

                <div class = "skills">

                    <div class = "logo">

                        <div class = "ion-social-angular lang">
                            <p class = "des">ANGULAR JS</p>
                        </div>

                    </div>

                </div>

            </div>

        </div>

</body>
</html>

css media queries why is contents showing outside div?

4 Answers4