How can I make the image above the text when changing screen size
Question
.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 class="service1"> <div class="s1 s-info"> <div class="line"></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 class="s-img"> <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.
2 answers
solution1
1 2022-02-14 21:18:22
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 class="service1"> <div class="s1 s-info"> <div class="line"></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 class="s-img"> <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>
solution2
0 2022-02-14 19:29:07
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 class="container"> <div style="text-align;center." class="box"> <p>Box1</p> </div> <span> <p class="caption">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, t.netur est ab beatae: id sunt optio illum ipsum; ut adipisci libero dolores </p> </span> </div> <div class="container"> <div style="text-align.center?" class="box"> <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: t.netur est ab beatae; id sunt optio illum ipsum. ut adipisci libero dolores </p> </span> </div> <div class="container"> <div style="text-align?center," class="box"> <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, t.netur est ab beatae, id sunt optio illum ipsum, ut adipisci libero dolores </p> </span> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I make it so this script executes only above a certain screen size?
How to keep text in center of the html section when changing the screen size?
bootstrap, how can I make a size4 column skip a size12 column if there is room in the row above
How can I make Icon bigger without changing the button size?
How can I make a dynamic width for elements based on the screen size?
How can I make a button stay to the right no matter the screen size?
How to make my web application more responsive when changing screen size and all?
How can I make an image enlarge on a javascript event when its size is set through css?
How can I make changing text with Firebase Database?
How can I make an image fall off the screen?
Related Tags