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>
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>
