Skip to main content
A
acobbcarthagemills
Known Participant
July 8, 2022
Resuelto

Side By Side Images Responsive - 3 Columns Desktop to 1 Column on Mobile

  • July 8, 2022
  • 2 respuestas
  • 5958 visualizaciones

I need html and css for a simple page that will have 3 images with text centered underneath each image, side by side on desktop, that goes to 1 column on mobile devices. So 3 columns to 1 column. Can anyone help? Has to be .php file to work with our site if that matters. I will use the existing header footer code for our site, and put this html code into the body. I looked at templates in Dreamweaver, and they were not helpful to me.

Thanks! 

    Este tema ha sido cerrado para respuestas.
    Mejor respuesta de Nancy OShea

    I'm going to cut to the chase and use CSS GRIDS because it does exactly what you want without media queries.  And it will work with any number of items.

     

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Evenly Distributed Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width: 95%;
margin: 0 auto;
padding: 2%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 1em;
border: 1px dotted silver;
}
.module {
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
</style>
</head>

<body>
<h3>Welcome to CSS Grids</h3>
<div class="grid">
<div class="module">1</div>
<div class="module">2</div>
<div class="module">3</div>
<div class="module">4</div>
<div class="module">5</div>
<div class="module">6</div>
<div class="module">7</div>
<div class="module">8</div>
<div class="module">9</div>
<div class="module">10</div>
<div class="module">11</div>
<div class="module">12</div>
<div class="module">13</div>
<div class="module">14</div>
<div class="module">15</div>
</div>
</body>
</html>

     

    2 respuestas

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 8, 2022

    Also see my code example in a related discussion below.

    https://community.adobe.com/t5/dreamweaver-discussions/3-responsive-images-in-a-row-one-displays-smaller-than-other-two/m-p/13058076#M219786

     

    Nancy O'Shea— Product User & Community Expert
      A
      acobbcarthagemillsAutor
      Known Participant
      July 13, 2022

      Ok, here is my testing page - this goes from 3 columns to 1 column the way I want it to, but I want it to go to 2 columns before it goes to 1 (so I need to add an inbetween). I think it will go right above this code but not quite sure what to add, can you please help?

       

      /* Responsive layout - makes a one column-layout instead of two-column layout */
      @media (max-width: 800px) {
      .flex-container {
      flex-direction: column;
      }
      }

      O
      osgood_
      Legend
      July 13, 2022

      Well you are going to have to re-think your layout because you have 3 images across so when you break to 2 images you will have odd white gaps as the 3rd image will stack under the 1st image with a big gap under image 2.

       

      Best way is to get rid of the 'Ask About Geosynthetics' button and locate it somewhere else. You can then have all 6 images in the same flex-container and break them evenly in 3 rows of 2 and then 6 rows of 1.

       

      So replace the html code you have at the moment with the following:

       

       

       

      <div class="flex-container">

<div class="product">
<img src="https://carthagemills.com/images/product-test/geotextiles.png" alt=""/> 
<a href="#">Geotextiles</a>
</div>

<div class="product">
<img src="https://carthagemills.com/images/product-test/geogrid.png" alt=""/>
<a href="#">Geogrid</a>
</div>

<div class="product">
<img src="https://carthagemills.com/images/product-test/geomembranes.png" alt=""/>

<a href="#">Geomambranes</a>

</div>


<div class="product">
<img src="https://carthagemills.com/images/product-test/geotextiles.png" alt=""/> 
<a href="#">Geotextiles</a>
</div>

<div class="product">
<img src="https://carthagemills.com/images/product-test/geogrid.png" alt=""/> 
<a href="#">Geogrid</h3>
</div>

<div class="product">
<img src="https://carthagemills.com/images/product-test/geomembranes.png" alt=""/>
<a href="#">Geomambranes</a>
</div>

</div>	

<!-- end flex-container-->

       

       

       

       

      and then replace the <style> </style> css block with the following:

       

       

       

       

      <style>
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 98%;
margin: 0 auto;
font-size: 30px;
text-align: center;

}
.flex-container .product {
background-color: #FFFFFF;
padding: 5px;
margin:	0 0 25px 0;
flex-basis: 27%;
}

.flex-container .product img {
width:	100%;
display: block;
}
.flex-container .product a {
margin:	 10px 0 0 0;
padding: 0;
font-size: 22px;
font-weight: 400;
color: #820124;
}

/* MEDIA QUERY 900px */
@media screen and (max-width: 900px) {
.flex-container {
width: 90%;
}
.flex-container .product {
flex-basis: 47%;
}
}

/* MEDIA QUERY 600px */
@media screen and (max-width: 600px) {
.flex-container {
width: 80%;
}
.flex-container .product {
flex-basis: 100%;
}
}

</style>

       

       

       

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      July 8, 2022

      You have 3 options:

       

      Hope that helps.

       

      Nancy O'Shea— Product User & Community Expert
      Términos y condicionesAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices