#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    4
    Rep Power
    0

    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
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    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+.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    4
    Rep Power
    0
    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
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    Maybe the inline style here; might be causing some of this effect:
    Code:
    <img style="padding-top: 6px;" src="http://www.wasabiphotography.com/images/meettravis.jpg" />
    Take the padding out and see what it looks like.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    4
    Rep Power
    0
    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.
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    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).

    Yet... another idea..., would be to implore JavaScript to change the padding and/or image dimensions; based on viewport/screen resolution.
    Last edited by web_loone08; February 26th, 2014 at 11:23 PM. Reason: Added Another Idea
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    4
    Rep Power
    0
    Right now the images just fill the width of the column and auto height. I don't know how else to do it.
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    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.

IMN logo majestic logo threadwatch logo seochat tools logo