Welcome to WebmasterWorld Guest from 54.198.221.13

Forum Moderators: not2easy

Message Too Old, No Replies

Floated left gallery images move to right on Responsive Tablet size

3 columns

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

Senior Member

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

joined:June 4, 2002
posts: 1830
votes: 3


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.
1:16 am on May 12, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3451
votes: 182


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;
3:55 am on May 12, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3451
votes: 182


One place you can read more about using these options is at CSS Tricks: [css-tricks.com...]
9:05 am on May 12, 2015 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 989
votes: 31


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
1:11 pm on May 12, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 5, 2001
posts:5810
votes: 94


I'm going to try that example too.
5:57 pm on May 12, 2015 (gmt 0)

Senior Member

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

joined:June 4, 2002
posts: 1830
votes: 3


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.
6:44 pm on May 12, 2015 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 989
votes: 31


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
7:33 pm on May 12, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3451
votes: 182


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.
5:42 pm on May 13, 2015 (gmt 0)

Senior Member

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

joined:June 4, 2002
posts: 1830
votes: 3


@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

Featured Threads

Free SEO Tools

Hire Expert Members