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

Explorer ,
Jul 08, 2022 Jul 08, 2022

Copy link to clipboard

Copied

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! 

Views

302

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Jul 13, 2022 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: repea
...

Likes

Translate

Translate
Adobe Community Professional ,
Jul 08, 2022 Jul 08, 2022

Copy link to clipboard

Copied

You have 3 options:

 

Hope that helps.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 08, 2022 Jul 08, 2022

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

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;
}
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

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> 

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

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

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

Try adding flex-direction: column;

 

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

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>

 

<div class="module">2</div>
<div class="module">3</div>

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 19, 2022 Jul 19, 2022

Copy link to clipboard

Copied

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 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 19, 2022 Jul 19, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 19, 2022 Jul 19, 2022

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 19, 2022 Jul 19, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 19, 2022 Jul 19, 2022

Copy link to clipboard

Copied

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

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 19, 2022 Jul 19, 2022

Copy link to clipboard

Copied

quote

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

 


By @acobbcarthagemills

 

Yes.

 

quote

 

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"

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 19, 2022 Jul 19, 2022

Copy link to clipboard

Copied

quote

 

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

width="175"


By @osgood_

 

According to MozillaWhile 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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

This is impossible

 

BenPleysier_1-1658316725339.png

and is even less relevant than headers in section elements.

 

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

quote

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

quote

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

BenPleysier_0-1658366800994.png

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 21, 2022 Jul 21, 2022

Copy link to clipboard

Copied

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 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines