How to make responsive Image and text displayed side by side in grid format
Hi Expert,
I want to display image and text in grid format.
But the distance between the Image+text is big how can that be adjusted.
Here is the codepen link https://codepen.io/melwyn-mendonca/pen/RwQPKbp
Attached is the image how it is displayed enter image description here
Also want it in the middle of the page.
.grid-container {
display: flex;
}
.grid-container>*{
flex: 1;
}
img{
width: 50%;
height: 50%;
}
.grid-item p{
padding: 1rem;
}
<div class="grid-container">
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast"></div>
<div class="grid-item-Text">
<p>Podcast</p>
</div>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/ebook.png?v=1651638533" alt="ebook"></div>
<p>Ebooks</p>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/youtube.png?v=1651638533" alt="youtube"></div>
<p>Youtube</p>
</div>
<div class="grid-container">
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast"></div>
<div class="grid-item-Text">
<p>Podcast</p>
</div>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/ebook.png?v=1651638533" alt="ebook"></div>
<p>Ebooks</p>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/youtube.png?v=1651638533" alt="youtube"></div>
<p>Youtube</p>
</div>
<div class="grid-container">
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast"></div>
<div class="grid-item-Text">
<p>Podcast</p>
</div>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/ebook.png?v=1651638533" alt="ebook"></div>
<p>Ebooks</p>
<div class="grid-item">
<img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/youtube.png?v=1651638533" alt="youtube"></div>
<p>Youtube</p>
</div>
1 answer
-
answered 2022-05-04 11:28
ILLUMINAG gaming
ive have made a template for you hope it helps
<!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <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> </head> <body> <div class="container"> <div class="row row-cols-2 row-cols-lg-6 g-2 g-lg-3"> <div class="col"> <div class="p-md-2 "> <img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast" width="75%;" > </div> </div> <div class="col"> <div class="p-2 ">use the name</div> </div> <div class="p-md-2 "> <img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast" width="75%;" > </div> <div class="col"> <div class="p-2 ">use the name</div> </div> <div class="p-md-2 "> <img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast" width="75%;" > </div> <div class="col"> <div class="p-2 ">use the name</div> </div> <div class="p-md-2 "> <img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast" width="75%;" > </div> <div class="col"> <div class="p-2 ">use the name</div> </div> <div class="p-md-2 "> <img src="https://cdn.shopify.com/s/files/1/0130/1797/2795/files/podcast_063b8574-56e0-4fa2-a9a9-c85f701754f3.png?v=1651638533" alt="podcast" width="75%;" > </div> <div class="col"> <div class="p-2 ">use the name</div> </div> </div> </div> </body> </html>
How many English words
do you know?
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
how many words do you know
Powered by Examplum