Gallery item display issue – only affecting fire fox

[ryan123]

Hi,

I have an issue displaying a gallery, which is composed of three photos. The photos are supposed to be displayed in a row (three photos, each in one column). On Safari and Chrome, the gallery displays as expected. On Firefox, however, it does not. See photos for an illustration of the issue. What should I do?

Thanks,
Ryan

PS. I love the theme. I’ve used it for two client projects, and am planning on continuing to recommend it.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.masonry-gallery .gallery-image.item-animated:last-child{
left:712px !important;
top:0px !important;
}

Thanks
Mohammad

[ryan123]

Hi Mohammad,

Thank you for your response.

I have tried to implement your solution. It works, but it’s not 100% perfect.

After adding the CSS, the photo readjusts, after the page is loaded. It leaves a big area of white space, where the row would have been, that once housed the photo. If you look at the bottom portion of the page on FireFox (the problem browser) and then an alternative browser you can see the issue. (http://kickstartercasestudies.com/)

I also tried to add a few other photo galleries and another problem occurred. If you go to this URL http://kickstartercasestudies.com/photos/ and open any of the galleries you will see that the third photo, on the top row, on the right side of the page over-laps another. This only becomes noticeable when you over over the image, and can see another one below it.

Any help would be greatly appreciated.
Thanks!
Ryan

[Mohammad – SUPPORT]

Hi,
I forward this to my colleague so he will assist you shortly.
Thanks
Mohammad

[Kyle – SUPPORT]

Hi

Please remove Mohammad’s css and add this:

.gallery-image.col-sm-4 {
  width: 33.2%;
}

– Kyle

[ryan123]

Wow, Kyle, that worked perfectly. There is just one more thing that needs to be fixed. It’s a very similar issue to the one you just solved.

If you go to this URL – http://kickstartercasestudies.com/photos/ – in Chrome the portfolios display correctly. But, if you go to the same URL in Firefox, there is a similar issue to what was happening on the home page (i.e., the three rows of images displayed as two rows of images). Can you help me fix this last problem?

Thanks again!
Ryan

(The attached photo shows the galleries displaying in a row of two, rather than a row of three.)

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.gallery-item .col-sm-4{width:33.2% !important;}

Thanks
Mohammad

[ryan123]

Perfect. That worked!

The problem is also on the photos page on Firefox – mbpoa.ca/photos/ (displaying 2 columns, rather than 3…. see attached photo).

Could you help me with the CSS to fix this problem?

Thanks again for all of your help, Mohammad!
Ryan

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.gallery-item.col-sm-4{width:33.2% !important;}

Thanks
Mohammad

[ryan123]

Beautiful. It worked. Thanks for everything!

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved.
Thanks 🙂
With Best Regards
Mohammad