How to make a responsive design using media queries.

Deepak Tiwari

3 min readDec 1, 2020

Recently I started work using media queries and trust me it was finally a wonderful learning experience.

Preview of what I developed :https://media-responsive-3x3-shuffle-sort.netlify.app/

What are Media Queries.?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Example

If the browser window is 300px or smaller, the background color will be green:

@media only screen and (max-width: 300px) {
body {
background-color: green;
}
}

Mobile First Design Rule

Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).This means that we must make some changes in our CSS.Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First:

Problem Statement

Design the solution for following problem :-Shuffle-Sort-Responsive-3X3

The page consists of 9 numbered cards which can be manipulated by using the shuffle and short buttons. Using JavaScript, allow the user to:
• Click the shuffle button to randomly rearrange the order of the cards.
• Click the sort button to place the cards in ascending order (1–9).

Colours used in this design:
#000000 ,#333333, #FFFFFF, #EFEFEF, #72C3DC, #2B8EAD, #6F98A8, #BFBFBF, #2F454E

First thing : Javascript Code

We need some javascript to do the array stuff and randomize the style of square blocks with color codes and some transition.

For random sorting of elements

For this , I used Array.prototype method to create a shuffle function and generated a random index for numbers 1–9 and assigned the input elements to them.

Array.prototype.shuffle = function () {
let input = this;
for (let i = input.length — 1; i >= 0; i — ) {
let randomIndex = Math.floor(Math.random() * (i + 1));
let itemAtIndex = input[randomIndex];
input[randomIndex] = input[i];
input[i] = itemAtIndex;
}
return input;
}

For changing styling of elements in array , shuffling the blocks and setting ground for transition.

var idArr = [“one”,”two”,”three”,”four”,”five”,”six”,”seven”,”eight”,”nine”];
for(var i=0; i<=8;i++){
var obj = document.getElementById(idArr[i]);
obj.style.transition = “0.5s”;
obj.style.opacity = 0;
var text = tempArray[i][0];
var timeout = 500;
doTimeout(obj,text,timeout,i);
}
}

Magical Recipe : The Responsive Design using Media Queries

As per UI given we need to change the UI at about 1200px to Desktop mode for others we need to adapt to mobile layout. This was achieved using the following code :-

/* Responsive layout — makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1200px) {
.column {
width: calc(100% — 30px);
height: 50px;
background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
background-image: -webkit-linear-gradient(right, #efefef, #efefef 97%, transparent 60%, transparent 100%);
margin-bottom: 5px;
color: black;
text-align: center;
vertical-align: middle;
font-size: smaller;
margin-left: 15px;
}
.main {
width: 100%;

}
.num{
font-size: 12px;
text-align: center;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
margin-top: 0px;
}

Conclusion

The entire code for this can be found at https://github.com/Deepak003/Shuffle-Sort-Responsive-3X3

You can see from the above example that the site hasn’t just been made smaller to fit, but that the content has actually been re-architected to be made more easy to access on the small screen of the device. In addition many people might think of this as being an iPhone layout — but it isn’t. It displays in the same way on Opera Mini on my Android based phone — so by using media queries and targeting the device capabilities ,any website can cater for all sorts of devices — even ones they might not have thought of!.