Modifying the ‘Seamless responsive photo grid’

[LeeWiley]

I love the tutorial on Seamless responsive photo grid, the css in there helped me to style a great litte page here: http://wileyillustration.com/?page_id=5

Now I want to take it a step further and create a purchase page with image previews and add a purchase button. I’ve got it roughed out, but the Gaps between where the purchase button ends and the next image preview starts is a large Gap. This may have something to do with the buttons being form type buttons generated through paypal. I’m hoping to find a solution in the CSS, honestly, I’m not super CSS savvy, I’m pretty novice, so any help would be appreciated.

Here is the page: http://wileyillustration.com/?page_id=9

Here is the CSS that I’m using in the custom css field of my WP template:

#photos {
/* Prevent vertical gaps line-height: 1.5;*/

-webkit-column-count: 4;
-webkit-column-gap: 35px;
-moz-column-count: 4;
-moz-column-gap: 35px;
column-count: 4;
column-gap: 35px;

}
#photos img {
/* Just in case there are inline attributes */

width: 100% !important;
height: auto !important;

}

@media (max-width: 1200px) {
#photos {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media (max-width: 1000px) {
#photos {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media (max-width: 800px) {
#photos {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media (max-width: 400px) {
#photos {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

[chrisburton]

I think this may mostly be a result of unnecessary break tags. Though I could be wrong.

[LeeWiley]

Thanks! I tried taking out the break tags, unfortunately, it didn’t really fix the issue. I think it may be an issue of how the CSS and the generated code for the paypal buttons work together. Because the last button on the page is actually just an image that redirects to another site when clicked, and if I repeat that one over and over, it doesn’t cause all those large gaps. Unfortunately, knowing what exactly I need to change in either the CSS or the paypal button code is a bit beyond my knowledge.

Is there a way to consolidate the paypal code? Or any other ideas are totally welcome.

[chrisburton]

@LeeWiley

Right. I was aware that wouldn’t “fix” the issue completely but they were unnecessary. You should put each image and content into a div so you can control the placement.

Something like this: http://jsfiddle.net/DSuuk/ (rough version)

It seems you have an h7 tag which there is no such thing. The names of your artwork should be in an h1.

[Author]

Posts