1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Floated left gallery images move to right on Responsive Tablet size

3 columns

         

Lorel

10:17 pm on May 11, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm trying to set up a Responsive gallery of images in 3 columns and 3 rows. I have a class for a gallery wrapper containing all the images with another class for each image which are each floated to the left. Everything looks fine in desktop and mobile phone but the 3rd image in each row is right aligned when viewed on Tablet. I've read multiple tutorials on responsive images but so far nothing has worked.

How do I keep the 3rd image in each column floated to the left instead of right for Tablets? I tried inline-block for each image but that doesn't work when each image has text under it.

Here is my css:

.gallery-wrapper {width:95%;
margin:10px auto;
overflow:hidden; }

.gallerypics {
float:left;
width: 250px;
margin:15px;
text-align:center;
font-size:12px; }

Here is the HTML:

<div class="gallery-wrapper">

<div class="gallerypics">
<a href="images/image.jpg" target="_blank"><img src="images/image2.jpg" alt=""><br>Name of image</a>
</div>

The above is repeated 8 more times with different image names with no other changes.

</div><!-- end gallery wrapper -->

I haven't set up any media queries yet.

not2easy

1:16 am on May 12, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



If I visualize the layout correctly, three 250 px images with 15px margins can't fit across a tablet screen without making some changes so that the images can resize. The width of 3 across would be 840px wide even if there are no additional margins or padding but the container is less than 730px wide so the float will float it down to the next line. Have you thought about setting the "gallerypics" div to display: table-cell; and the "gallery-wrapper" to display: table; Then a media query can change those to display: block;

The display would be able to have a caption under each image. I was working on a similar layout today - though it also uses a container div for each row. It breaks fine without any floats. The width are not set in px, but you could use a max-width: 250px;

not2easy

3:55 am on May 12, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



One place you can read more about using these options is at CSS Tricks: [css-tricks.com...]

birdbrain

9:05 am on May 12, 2015 (gmt 0)



Hi there Lorel,

here is an example for you to try... 

<!DOCTYPE html>
<html lang="en">
<head>

<base href="https://www.webmasterworld.com/gfx/">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">

<title>Responsive gallery</title>

<style>
#gallery-wrapper{
 width:95%;
 padding:0;
 margin:10px auto;
 list-style-type:none;
 }
#gallery-wrapper li {
 display:inline-block;
 width:32%;
 margin:10px 0.666%;
 text-align:center;
 }
#gallery-wrapper li a {
 color:#000;
 text-decoration:none;
 }
#gallery-wrapper li img {
 width:100%;
 height:auto;
 border:0;
 }
</style>

</head>

<body>
<ul id="gallery-wrapper">
<li> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</li><li> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</li><li> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</li><li> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</li><li> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</li><li> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</li><li> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</li><li> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</li><li> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</li>
</ul>

</body>
</html>


birdbrain

ken_b

1:11 pm on May 12, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm going to try that example too.

Lorel

5:57 pm on May 12, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Before I change everything over to a list format I would like to try to get divs to work.

@not2easy

"Have you thought about setting the "gallerypics" div to display: table-cell; and the "gallery-wrapper" to display: table; Then a media query can change those to display: block; "

I tried your suggestions but all the pictures lost their margins and didn't break when the page shrunk - in fact they stayed all in one line running beyond the edge of page. This is the first time I've tried to make a div behave like a table. If you got yours to work can you check my code below? I'm not sure if I should leave out something I had before:

PS. I have another page with only 2 columns so I've changed the css classes for the wrappers.

.gallery-wrapper-2col {
width:98%;
display:table;
margin:10px auto;
overflow:hidden; }

.gallery-wrapper-3col {
width:95%;
display:table;
margin:10px auto;
overflow:hidden; }

/* pics inside rooms*/
.gallerypics {
display:table-cell;
width: 250px;
margin:15px;
text-align:center;
font-size:12px; }

The html hasn't changed.

birdbrain

6:44 pm on May 12, 2015 (gmt 0)



Hi there Lorel,

Before I change everything over to a list format I would like to try to get divs to work.


It is quite a simple matter to use the "div element" instead of the "ul element"
for your project, but it is certainly not considered to be semantic. ;)

Nine images, more or less, constitutes a list. ;)

Here is the non-semantic "div element" code... 


<!DOCTYPE html>
<html lang="en">
<head>

<base href="https://www.webmasterworld.com/gfx/">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">

<title>Responsive gallery</title>

<style>
#gallery-wrapper{
 width:95%;
 padding:0;
 margin:10px auto;
 list-style-type:none;
 }
#gallery-wrapper div {
 display:inline-block;
 width:32%;
 margin:10px 0.666%;
 text-align:center;
 }
#gallery-wrapper div a {
 color:#000;
 text-decoration:none;
 }
#gallery-wrapper div img {
 width:100%;
 height:auto;
 border:0;
 }
</style>

</head>

<body>
<div id="gallery-wrapper">
<div> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</div><div> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</div><div> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</div><div> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</div><div> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</div><div> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</div><div> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</div><div> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</div><div> 
 <a href="failure-to-communicate.jpg" target="blank">
 <img src="failure-to-communicate.jpg" alt="" width="757" height="439">
 Name of image.</a>
</div>
</div>

</body>
</html>


...which, as you may observe, the only discernible difference from my my previous
code being in the extra bytes added for the changing of "ul" and "li" to "div". ;)

birdbrain

not2easy

7:33 pm on May 12, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



My suggestion for display: table-cell above would have required a media query to display: block in place of :table-cell when the media is wider than its container. Without that it would just follow instructions and try to display as a table.

The code added for div elements by birdbrain (TY) is another option - it would have worked the same using "li". This resizes the images to fit their containers in place of sliding the containers around as the table-cell/media query :block does. There is almost always more than one way to accomplish most layout ideas, it all depends on what you feel comfortable with, what properties are inherited by the elements you're working with and how you want it to behave under various conditions.

Lorel

5:42 pm on May 13, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@birdbrain.

I didn't realize that 9 images would be considered a list and I thought I needed to have each img line up vertically. I like your arrangement better.

Thanks everyone who offered suggestions.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026