Scribd Logo
Upload

Welcome to Scribd!

  • Index 2

    Uploaded by

    tordiau
    4 views2 pages
    The document demonstrates a responsive image grid layout that adjusts based on browser window size. It uses CSS flexbox properties to create four equal columns on large screens that stack vertically on smaller screens. Media queries change the column layout and sizing at 800px and 600px breakpoints to maintain responsiveness across devices.

    Original Description:

    Original Title

    index2

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document demonstrates a responsive image grid layout that adjusts based on browser window size. It uses CSS flexbox properties to create four equal columns on large screens that stack vertically on smaller screens. Media queries change the column layout and sizing at 800px and 600px breakpoints to maintain responsiveness across devices.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    4 views2 pages

    Index 2

    Uploaded by

    tordiau
    The document demonstrates a responsive image grid layout that adjusts based on browser window size. It uses CSS flexbox properties to create four equal columns on large screens that stack vertically on smaller screens. Media queries change the column layout and sizing at 800px and 600px breakpoints to maintain responsiveness across devices.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    <!

    DOCTYPE html>
    <html>
    <style>
    * {
    box-sizing: border-box;
    }

    body {
    margin: 0;
    font-family: Arial;
    }

    .header {
    text-align: center;
    padding: 32px;
    }

    .row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
    }

    /* Create four equal columns that sits next to each other */


    .column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
    }

    .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
    }

    /* Responsive layout - makes a two column-layout instead of four columns */


    @media screen and (max-width: 800px) {
    .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
    }
    }

    /* Responsive layout - makes the two columns stack on top of each other instead of
    next to each other */
    @media screen and (max-width: 600px) {
    .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    }
    }
    </style>
    <body>
    <!-- Header -->
    <div class="header">
    <h1>Responsive Image Grid</h1>
    <p>Resize the browser window to see the responsive effect.</p>
    </div>

    <!-- Photo Grid -->


    <div class="row">
    <div class="column">
    <img src="img/gbga.jpg" style="width:100%">
    <img src="img/caver.jpg" style="width:100%">
    <img src="img/gbga6.png" style="width:100%">
    <img src="img/gbga4.jpg" style="width:100%">
    <img src="img/lala.jpg" style="width:100%">
    <img src="img/logo.png" style="width:100%">
    <img src="img/paris.jpg" style="width:100%">
    </div>
    <div class="column">
    <img src="img/underwater.jpg" style="width:100%">
    <img src="img/ocean.jpg" style="width:100%">
    <img src="img/gbga2.jpg" style="width:100%">
    <img src="img/mountainskies.jpg" style="width:100%">
    <img src="img/rocks.jpg" style="width:100%">
    <img src="img/underwater.jpg" style="width:100%">
    </div>
    <div class="column">
    <img src="img/gbga4.jpg" style="width:100%">
    <img src="img/rocks.jpg" style="width:100%">
    <img src="img/falls2.jpg" style="width:100%">
    <img src="img/paris.jpg" style="width:100%">
    <img src="img/nature.jpg" style="width:100%">
    <img src="img/mist.jpg" style="width:100%">
    <img src="img/paris.jpg" style="width:100%">
    </div>
    <div class="column">
    <img src="img/underwater.jpg" style="width:100%">
    <img src="img/gbga5.jpg" style="width:100%">
    <img src="img/wedding.jpg" style="width:100%">
    <img src="img/mountainskies.jpg" style="width:100%">
    <img src="img/gbga1.jpg" style="width:100%">
    <img src="img/underwater.jpg" style="width:100%">
    </div>
    </div>

    </body>
    </html>

    You might also like