February 26th, 2014, 04:59 PM
Alignment of images using columns on responsive site
I'm creating a new wordpress site. I have a small collage of images that I've used the easy columns plugin to arrange the images. I then added some @media stuff in css to make the images rearrange themselves nicely when the browser is <768px wide.
The problem is between 1080px (The normal max full width) and 769px. As you scale the browser window down, the images all resize, but for some reason they aren't resizing evenly together. By 769px wide, there is a noticeable alignment problem between the left half and the right half.
For reference, I'm using the calc function in the css to set the spacing between images equally. For example: calc(50% - 5px)
Since I'm a new member I can't post the link properly, but it's travishaughton dot com /test
picture is at wasabiphotography dot com/images/alignment.jpg
February 26th, 2014, 10:31 PM
The spacing between the images; looks exactly the same to me. I tested your page in FireFox using the Web Developers - Responsive Design View. I tested in small, medium and large resolutions and it looked to me; to be consistently congruent spacing between the images. Are you testing it in Internet Explorer; specifically version 8 and below? Because, if you are..., "calc()" will not work; it works in IE9+.
February 26th, 2014, 10:47 PM
The spacing between the images should look exactly the same. 10 pixels. The problem is in the alignment at the bottom between the left half and the right half. I've illustrated the problem exactly in the jpg:
wasabiphotography dot com/images/alignment.jpg
February 26th, 2014, 10:56 PM
Maybe the inline style here; might be causing some of this effect:
Take the padding out and see what it looks like.
<img style="padding-top: 6px;" src="http://www.wasabiphotography.com/images/meettravis.jpg" />
February 26th, 2014, 11:03 PM
It basically bumps up the "meet travis" image by 6 pixels. Then the spacing between that image and the three above it is off, and the bottom of that image is off by 6 pixels to start with.
The issue has to do with the fact that there is 10 pixels of white space that do not resize on the right half and nothing similar on the left half.
I was hoping somebody would know of an elegant workaround to keep it looking okay as it scales.
February 26th, 2014, 11:14 PM
Yeah, that is the issue though, because your not setting the spacing with media queries; by using "calc()"..., the element(s) sizes is going to change based on browser screen resolution / viewport dimensions. That is why I am not a big fan of calc(); that and..., it's IE8- incompatible. One work around, would be to define that image's padding in a media query; instead of giving it an inline static style. Another way..., would be to change the image size with "calc()" (which you maybe doing; I just have not looked intently at your CSS, just yet).
Last edited by web_loone08; February 26th, 2014 at 11:23 PM.
Reason: Added Another Idea
February 26th, 2014, 11:25 PM
Right now the images just fill the width of the column and auto height. I don't know how else to do it.
February 26th, 2014, 11:35 PM
Have you ever used media queries before (from your test page, it looks like you are using them now... maybe your WordPress theme is adding them though, without your knowledge)? If not, it really is something to look into, for this sort of RWD (Responsive Web Design) issue. If you have used them before; my suggestion would be to move away from calc() and use them; maybe make a grid with a CSS table. Then set-up your media queries; based on how you want the images to display in predestined/pre-defined viewport resolutions. This is pretty much the norm, in our modern CSS3 time period. I really do not see many sites using calc(), all that often.
Last edited by web_loone08; February 26th, 2014 at 11:45 PM.