Responsive | CSS Media-Quarry

-

CSS Media Quarry, Responsive


If you are looking for the best simple responsive media-query example, then below these code snipped must be helpful for you. 

Ingreadients :

  • HTML 
  • CSS 
  • image files 

Main Focus Point :

  • CSS
    • display : none | block
    • @media
      • min-width 
      • max-width 
 

HTML 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Media Query</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <main>
 
        <div class="box" id="box-1">
            <img src="./img/mobile.png" alt="">
            <p>Phone</p>
        </div>
        
        <div class="box" id="box-2">
            <img src="./img/tab.png" alt="">
            <p>Tablet</p>
        </div>
        
        <div class="box" id="box-3">
            <img src="./img/laptop.png" alt="">
            <p>Laptop</p>
        </div>
        
        <div class="box" id="box-4">
            <img src="./img/big_display.png" alt="">
            <p>Big Display</p>
        </div>
 
    </main>
</body>
</html>

CSS 

* {
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
    font-family: 'Lucida Sans';
}
 
.box {
    width        : 95%;
    margin       : 20px auto;
    text-align   : center;
    font-size    : 22px;
    padding      : 20px 0;
    margin-bottom: 10px;
    background   : tomato;
    border-radius: 10px;
    border       : 1px dashed black;
    display      : none;
}
 
img {
    width: 50%;
}
 
#box-1>img {
    width: 200px;
}
 
#box-2>img {
    width: 35%;
}
 
/* ############################################## */
/* ############# Media Query Start  ############# */
/* ############################################## */
 
@media (max-width:480px) {
    #box-1 {
        display         : block;
        background-color: lightseagreen;
        height          : 500px;
    }
}
 
@media (min-width:481px) and (max-width:850px) {
    #box-2 {
        display         : block;
        background-color: lightskyblue;
    }
}
 
@media (min-width:851px) and (max-width:1280px) {
    #box-3 {
        display         : block;
        background-color: lightgreen;
    }
}
 
@media (min-width:1281px) {
    #box-4 {
        display         : block;
        background-color: lightgoldenrodyellow;
    }
}
Images: 


Comments

Post a Comment

Popular posts from this blog

Stack

-
Data-Structure | Linear Category Stack Code Example  // BluePrint || Static Thing class Stack { // LIFO = Last In Fast Out | (Linear) Data-Structure constructor() { // empty stack this.stack = []; } // add new data in stack, one by one add(data) { this.stack.push(data); } // remove data from stack remove() { // for checking, is stack empty or not... if (this.stack.length) { return this.stack.pop(); } } } // ######################################################## // ######################################################## // ######################################################## // Object Creating || Dynamic Thing // Create an object of Stack class const person = new Stack(); person.add('Sam'); person.add('Jon'); person.add('Ken'); person.add('Lee'); // total object calling [its not a good approach] c...
Read more

Diamond Shape by HTML & CSS

-
Image
Diamond Hover Effect You may wonder How to create a diamond shape in HTML, so here it may what you looking at... Ingredients:  HTML  CSS  Main Use Of: Grid Flex Transform HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Diamond Shape</title> </head> <body> <!-- .item.item$*9>p.text{$} --> <main> <div class="item item1"> <p class="text">1</p> </div> <div class="item item3"> <p class="text">3</p> </div> <div class="item item6"> <p class="text">6</p> </div> <div class="item item2"> <p class="text">2</p> </div> <div class="item item5"> <p class="text...
Read more

Dictionary

-
Data-Structure | Non-Linear Category Dictionary Code Example class Dictionary { // Time Complexity | Contestant Time // O(1) // empty object constructor() { this.dictionary = {} } // add data as { key : value } pair add(key, value) { this.dictionary[key] = value; } get(key) { return this.dictionary[key]; } } // ######################################################## // ######################################################## // ######################################################## const phoneBook = new Dictionary(); // add data into Dictionary phoneBook.add('Jon', '01717-112233'); phoneBook.add('Sam', '01712-334455'); phoneBook.add('Lee', '01717-556644'); console.log(phoneBook); // Dictionary { // dictionary: { Jon: '01717-112233', Sam: '01712-334455', Lee: '01717-556644' } // } console....
Read more