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

Report · Jul 08, 2022

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!

Report · Jul 08, 2022

You have 3 options:

Manually code with CSS Flexbox,
Manually code with CSS Grids,
Use Bootstrap's responsive framwork in DW CC to build your entire site.
Go to File > New > Starter Templates > Bootstrap Templates.
Choose one of the layouts, hit CREATE button.

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 08, 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-sma...

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 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;
}
}

Report · Jul 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>

Report · Jul 13, 2022

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>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 13, 2022

ok, in this test page, how would I put the word 'geotextiles' under the image, centered?

https://carthagemills.com/Geosynthetic-products-test2.php

Report · Jul 13, 2022

Try adding flex-direction: column;

.module {
background: #eaeaea;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
}

Report · Jul 13, 2022

Please fix your code errors. Errors really do effect layout and how browsers behave.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fcarthagemills.com%2FGeosynthetic-products-test2.php

CSS:

figcaption {text-align:center}

HTML:

<div class="grid">
<div class="module">
<fig>
<img src="https://dummyimage.com/200x200" alt="placeholder">
<figcaption>Caption here</figcaption>
</fig>

</div>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 19, 2022

Ok, so I removed the left column on this page, and now I need help. How do I get the columns to be centered on the page? How can I control the space between the rows and columns? How do I get rid of the extra space on the top sides of the page to prevent from needing to scroll so much?

https://carthagemills.com/Geosynthetic-products-test2.php

Report · Jul 19, 2022

I figured out the extra space issue. Now just need to know how to center all the content and control space in rows/columns

https://carthagemills.com/Geosynthetic-products-test2.php

Report · Jul 19, 2022

Update. I got it centered.

Now how can I control the space between columns and rows?

On mobile - when it's 1 column - how can I make the images fill more space?

Thanks, and sorry for so many posts!

Report · Jul 19, 2022

The trouble you have is your images arent wide enough to fill their container.

If you add the below to your css styles rules:

.module img {
width: 100%;
}
.module a {
width: 100%;
text-align: center;
}

you will see your grid performs much better BUT your images will degrade as they arent wide enough to withstand making them any larger for mobile 1 column.

I would make your images 2x as wide as they currently are OR if you are worried about band width consumpution use image srcset to serve specific sized images to various browser viewport widths.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture

You'll probably end up with 36 different images though so usually not worth the effort of managing the workflow, in my opinion unless you are getting paid mega-bucks to do so.

Report · Jul 19, 2022

so you would make the squares 350x350 instead of 175x175?

Wouldn't that only allow 2 columns on desktop rather than 4?

Report · Jul 19, 2022

so you would make the squares 350x350 instead of 175x175?

By @acobbcarthagemills

Yes.

Wouldn't that only allow 2 columns on desktop rather than 4?

By @acobbcarthagemills

No, just set the images to the maximum width of their containers:

.module img {
max-width: 100%;

height: auto;
}

Oh and remove the inline width from all the images, it is not needed:

width="175"

Report · Jul 19, 2022

Oh and remove the inline width from all the images, it is not needed:

width="175"

By @osgood_

According to Mozilla: While developer best practices from the last decade may have recommended omitting the width and height attributes of an image on an HTML <img>, due to aspect ratio mapping, including these two attributes is considered a developer best practice.

Wappler, the only real Dreamweaver alternative.

Report · Jul 20, 2022

These days best practices are largely irrelevant and can be taken with a grain of salt. Not so long ago it was considered bad practice to use more code than is necessary, what happened to that one may question. Everyone just makes it up according to what they feel is best practices these days and the workflow they choose to use.

According to you one should use a heading tag in a section tag but that's not specifically what the spec says. It says where possible, so what appears to be good practice to one developers is not always shared by another, that's the ugly side of web development.

Report · Jul 20, 2022

This is impossible

and is even less relevant than headers in section elements.

Wappler, the only real Dreamweaver alternative.

Report · Jul 20, 2022

Following a minority of influences who have zero real world experience more often than not complicates issues where there isn't any to begin with or the issues that they speak about are so insignificant that its not worth the extra workflow which is usually involved.

Edited.

Now I have had time to do some research, read the following, it's not just as simple as declaring a width/height on the img tag itself, which will restrict repsonsiveness.

https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/

Serioulsy is it worth the read or the effort, I dont think so myself. No one has set width or height on their images for years and suddenly its a good idea to counter-act some minor layout display issues which no-one give a f**t about unless you happen to live in outer-space, using a 1990s dial up modem. Even the better Youtube developers channels, those with over a million subscribers and those close to a million subscribers don't adopt such practices, which they probably see as being not practcial or worthwhile.

This is where we are today in web-devlopment, you have a lot of minor 'nuisances', all thinking that their issues are the most relevant when in reality to most web-developers, trying to earn a crust of bread, are totally not.

Even more curious, the solution seems to be to use css aspect ratio, width and height. Well there are some people who won't use css grid yet because it is only 96% globally supported......weird this stuff.......who decides when, why and what.

Report · Jul 20, 2022

what do you think now?

https://carthagemills.com/Geosynthetic-products-test2.php#

Report · Jul 20, 2022

what do you think now?
https://carthagemills.com/Geosynthetic-products-test2.php#

By @acobbcarthagemills

Grid works better now. Not sure I would have included the text as part of the images personally as its not search engine friendly but that's your decision......at least you have alt tags, which somewhat relate to the products, so Google should read those. How effective that is in comparison to including the information in heading tags or directly in the anchor tags, I dont know.

Report · Jul 20, 2022

what do you think now?
https://carthagemills.com/Geosynthetic-products-test2.php#

=========

Only browsers use ALT text when images fail to load. How does this help visually impaired users? How does this help search engines? How does this help non-English speaking customers? It doesn't.

ALT text is not a replacement for real text that can be indexed, searched and translated.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 20, 2022

Thank you. I will work on adding a sentence about each product category under the image. I have just been given the advice to aim for at least 300 words of text per page.

Report · Jul 20, 2022

Only browsers use ALT text when images fail to load. How does this help visually impaired users? How does this help search engines? How does this help non-English speaking customers? It doesn't.

ALT text is not a replacement for real text that can be indexed, searched and translated.

By @Nancy OShea

Validators are renowned for pointing to the fact that an "alt" attribute is a requirement. In fact, if you go to W3Schools, you will read

Despite this, as far as I can see, there is no official mandate to use the "alt" attribute.

Having said that, and pointing to WCAG 2.0 for guidance, I tend to always include the "alt" attribute for my images.

For more... https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img

Wappler, the only real Dreamweaver alternative.

Report · Jul 21, 2022

Hi, I am working on adding text now under the images. Can you please tell me how to set the height of each area so that the text can flow freely without the boxes getting out of alignment vertically? (like if one sentence is much shorter than the one beside it). Thanks for all of the help! I'm learning so much!

https://carthagemills.com/Geosynthetic-products-test2.php

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

1 Correct answer