Responsive: from grid-area to flex

Hello,

I have implemented a grid system for an HTML page when it’s viewed on screens larger than 520px in width.

When the page is viewed on screens smaller than 520px in width, I want to reorganize my page using a flex box instead.

In the following code, this is done within the .gridContainer class. The text rearranges properly, but the image is not visible.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>bla</title>
        <style>
  
            /*:::::::::::::::::::::::*/
            /*       GRID SETUP     */
            /*:::::::::::::::::::::*/


            .gridContainer {
                width: 90%;
                margin: 0 auto;
                display: grid;
                height: 100vh;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-gap: 15px 15px;
            }

            @media screen and (max-width: 520px) {
                .gridContainer {
                    display: flex;
                    flex-direction: column;
                    width: 70%;
                }
            }

            /*:::::::::::::::::::::::*/
            /*       OVERVIEW       */
            /*:::::::::::::::::::::*/


            #imgLogoDefTasty {
                grid-area: 2 / 5 / span 6 / span 4;
                background-image: url(./images/reformat.jpg);
                background-size: cover;
                background-position: center;
                background-color: rgb(125, 125, 125);
            }

            #txtLogoDefTasty {
                grid-area: 2 / 3 / span 2 / span 2;
                margin: 1 1 1 1;
            }

            @media screen and (max-width: 520px) {
                #imgLogoDefTasty {
                    display: block;
                    width: 100%;
                    margin: 0 auto;
                }
            }
        </style>
    </head>
   
    <body>
        <section id="projectOverview">
            <div class="gridContainer">
                <div id="txtLogoDefTasty">
                    <h2>PROJECT OVERVIEW</h2>
                    <h3>blabla</h3>
                    <p>
                    Everyone has the right to freedom of thought, conscience and religion;
                    this right includes freedom to change his religion or belief, and interference and to seek,
                    receive and impart information and ideas through any media and regardless of frontiers.
                    Everyone has the right to rest and leisure, including reasonable limitation of working hours and periodic holidays with pay.
                    </p>
                    <h3>blabla</h3>
                    <p>
                    Everyone has the right to freedom of thought, conscience and religion;
                    this right includes freedom to change his religion or belief, and interference and to seek,
                    receive and impart information and ideas through any media and regardless of frontiers.
                    Everyone has the right to rest and leisure, including reasonable limitation of working hours and periodic holidays with pay.
                    </p>
                    <h3>blabla</h3>
                    <p>
                    Everyone has the right to freedom of thought, conscience and religion;
                    this right includes freedom to change his religion or belief, and interference and to seek,
                    receive and impart information and ideas through any media and regardless of frontiers.
                    Everyone has the right to rest and leisure, including reasonable limitation of working hours and periodic holidays with pay.
                    </p>
                </div>
                
                <div id="imgLogoDefTasty"></div>
            </div>
        </section>
    </body>
</html>

Result:

The page viewed with 1920px width:

The page viewed with 520px width:

Where is the image?

Hi there!

When elements become flex-children, they condense to the min-width and height of their content (unless altered otherwise). Because of this, your <div> is not visible because it has no set height.

image

image

1 Like

Oh! I didn’t think about it, thank you so much for your help @kirativewd

1 Like