How can I make the image above the text when changing screen size-CodePudding

.service1{
  display: grid;
  grid-template-columns: 39% 61%;
}
.s-info{
    padding: 20% 10% 0 10%;
    background-color: #072645;
    color: white;
}
.s-info h1{
    font-size: 2rem;
}
/* font-size:1rem for width 300px */
.s-info p{
    font-size: 1rem;
}
.s-img img {
  width: 100%;
  height: 646px;
}

<!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>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
       <div >
        <div >
          <div ></div>
          <h1>UX/UI Design</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex
            minima nulla voluptate autem!Lorem ipsum dolor sit amet, consectetur
            a accusantium commodi ex minima nulla voluptate autem!
          </p>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum,
            inventore nobis!Lorem ipsum dolor sit amet, consectetur a
            accusantium commodi ex minima nulla voluptate autem! Voluptate alias
            esse cumque?
          </p>
        </div>
        <div >
          <img
            src="https://s3-alpha-sig.figma.com/img/bcb7/a1c5/6db72a2f9cd55704e0e140a6eb63d3b5?Expires=1646006400&Signature=caVOH5cjcYrUaZ3KO10XI1~HwKtOMJJ4BI4ZvrXxJGhblSsO4e0~7imCTNl39XAeswii-n3zx7yPcgJERp3-h-d4tE5YgvBQArJKFBKsG1rq3T43NYQcgMpIWR0apgqfWGr8xA15DAcwQLt6EXAdWCXREiWJbQf~yLBpelTqX4okY1Ib8T3~~4tjJB77btzPAA8YifULxwptCytIzVKDOXLHS6dGRXqLjkuhgQeH6sL0~BRfFVbXkW7KeYVaDxM-ZcFm3XMycaVu0zcLDXBlwFrYK4c~~eletJfTpceREFmET4HF-AVMu3Mbe6L8F7bpNjysxpQKH2aS8nswj0ykDA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
            alt=""
            srcset=""
          />
        </div>
      </div>
        </body>
</html>

I have used css grid to make this structure. I can't figure out how to stack image above text after a particular screen size, I thought about media query but couldn't think through it. Please help! Its a simple grid with 2 columns. I want to know if there is a way that when the screen size shrinks image(right side component/ 2nd item) comes above and text comes below it.

CodePudding user response：

The answer, as usual, is media queries. For grids, it's changing the template columns and rows so that things are stacked as you want them.

Here I've set the breakpoint at 800px so that it would stack in Stack Overflow's normal design, but maybe not at full page.

(I also changed the way your image was displayed so that it never appears distorted; that was a personal decision. Just remove aspect-ratio and uncomment your height to get it back to normal).

.service1 {
  display: grid;
  grid-template-columns: 39% 61%;
}

.s-info {
  padding: 20% 10% 0 10%;
  background-color: #072645;
  color: white;
}

.s-info h1 {
  font-size: 2rem;
}


/* font-size:1rem for width 300px */

.s-info p {
  font-size: 1rem;
}

.s-img img {
  width: 100%;
  /*height: 646px;*/
  aspect-ratio: 1.977808599167822;
}

@media screen and (max-width: 800px) {
  .service1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .s-info {
    padding: 0 10%;
    grid-row: 2/2;
    grid-column: 1/1;
  }
  .s-img {
    grid-row: 1/1;
    grid-column: 1/1;
  }
}

<!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>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div >
    <div >
      <div ></div>
      <h1>UX/UI Design</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex minima nulla voluptate autem!Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex minima nulla voluptate autem!
      </p>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum, inventore nobis!Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex minima nulla voluptate autem! Voluptate alias esse cumque?
      </p>
    </div>
    <div >
      <img src="https://s3-alpha-sig.figma.com/img/bcb7/a1c5/6db72a2f9cd55704e0e140a6eb63d3b5?Expires=1646006400&Signature=caVOH5cjcYrUaZ3KO10XI1~HwKtOMJJ4BI4ZvrXxJGhblSsO4e0~7imCTNl39XAeswii-n3zx7yPcgJERp3-h-d4tE5YgvBQArJKFBKsG1rq3T43NYQcgMpIWR0apgqfWGr8xA15DAcwQLt6EXAdWCXREiWJbQf~yLBpelTqX4okY1Ib8T3~~4tjJB77btzPAA8YifULxwptCytIzVKDOXLHS6dGRXqLjkuhgQeH6sL0~BRfFVbXkW7KeYVaDxM-ZcFm3XMycaVu0zcLDXBlwFrYK4c~~eletJfTpceREFmET4HF-AVMu3Mbe6L8F7bpNjysxpQKH2aS8nswj0ykDA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
        alt="" srcset="" />
    </div>
  </div>
</body>

</html>

CodePudding user response：

Sorry it's a little confusing. You can design any responsive page you want with media queries. I gave float none for make the box above the text. You can run code snippet with full page for test it.

@media only screen and (max-width: 600px) {
  .box {
    background-color: yellow;
    display: inline-block;
    width: 400px;
    height: 200px;
    float: none;
    margin-left: 50px;
    margin-top: 20px;
  }

  .box p {
    margin-top: 20%;
  }
  .container {
    border: 2px solid black;
    display: block;
    width: 500px;
    height: 450px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  .container span p {
    padding: 10px;
  }
}

@media only screen and (min-width: 600px) {
  .box {
    background-color: yellow;
    display: inline-block;
    width: 450px;
    height: 250px;
    float: none;
    margin-left: 50px;
    margin-top: 20px;
  }

  .box p {
    margin-top: 20%;
  }
  .container {
    border: 2px solid black;
    display: block;
    width: 550px;
    height: 450px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  .container span p {
    padding: 10px;
  }
}

@media only screen and (min-width: 768px) {
  .box {
    background-color: yellow;
    display: inline-block;
    width: 550px;
    height: 350px;
    float: none;
    margin-left: 50px;
    margin-top: 20px;
  }

  .box p {
    margin-top: 20%;
  }
  .container {
    border: 2px solid black;
    display: block;
    width: 650px;
    height: 550px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  .container span p {
    padding: 10px;
  }
}

@media only screen and (min-width: 992px) {
  .box {
    background-color: yellow;
    display: inline-block;
    width: 660px;
    height: 450px;
    float: none;
    margin-left: 50px;
    margin-top: 20px;
  }

  .box p {
    margin-top: 20%;
  }
  .container {
    border: 2px solid black;
    display: block;
    width: 750px;
    height: 650px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  .container span p {
    padding: 10px;
  }
}

@media only screen and (min-width: 1200px) {
  .box {
    background-color: yellow;
    width: 250px;
    height: 250px;
    float: left;
    margin: 10px;
  }

  .box p {
    margin-top: 40%;
  }

  .container {
    border: 2px solid black;
    width: 750px;
    height: 270px;
    margin-bottom: 20px;
  }

  .container span p {
    padding-right: 10px;
  }
}

<!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">
    <link rel="stylesheet" href="/style.css">
</head>

<body>
    <div >
        <div style="text-align:center;" >
            <p>Box1</p>
        </div>
        <span>
            <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda saepe ad
                quibusdam optio? Nisi nostrum necessitatibus, veritatis vitae excepturi autem officia nulla quaerat
                mollitia
                dolorem quas ipsum in molestiae nesciunt!
                Aspernatur consequuntur rem, tenetur est ab beatae, id sunt optio illum ipsum, ut adipisci libero
                dolores
            </p>
        </span>
    </div>
    <div >
        <div style="text-align:center;" >
            <p>Box2</p>
        </div>
        <span>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda saepe ad
                quibusdam optio? Nisi nostrum necessitatibus, veritatis vitae excepturi autem officia nulla quaerat
                mollitia
                dolorem quas ipsum in molestiae nesciunt!
                Aspernatur consequuntur rem, tenetur est ab beatae, id sunt optio illum ipsum, ut adipisci libero
                dolores
            </p>
        </span>
    </div>
    <div >
        <div style="text-align:center;" >
            <p>Box3</p>
        </div>
        <span>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda saepe ad
                quibusdam optio? Nisi nostrum necessitatibus, veritatis vitae excepturi autem officia nulla quaerat
                mollitia
                dolorem quas ipsum in molestiae nesciunt!
                Aspernatur consequuntur rem, tenetur est ab beatae, id sunt optio illum ipsum, ut adipisci libero
                dolores
            </p>
        </span>
    </div>

</body>

</html>