Multi-Size Masonry on big screens …

[fabrikgrafik]

I made a portfolio page with the Multi-size masonry option. Everything floats in nice but on big screens there are problems when I have for example 1 standard sized thumbnail and 1 wide thumbnail. It makes 3 rows. Can this be fixed or do I have to upload other images or a max height? Thanks!

Normal sized screens (no problem)

Big sized screens (e.g. Apple cinema display)

[Swift Ideas – Ed]

Hi there,

Can you drop me a link to check this out please? I’ll have a look at what’s causing that to drop down. Also let me know what browser you are using.

Thanks,

– Ed

[fabrikgrafik]

This reply has been marked as private.

[fabrikgrafik]

looks like Chrome doesn’t have this problem … Safari (7.0.4 = latest version) and firefox (30.0 = latest version) do have the problem.

[Swift Ideas – Ed]

For the breaking onto a new line, unfortunately this seems to be a browser issue (the way they round up pixels, leaving the layout to assume they are too big to fit. However you could try this css:

@media (min-width: 1500px) {
.multi-masonry-items li.col-sm-8 {
width: 66.3%;
}

You’d want to change 1500 to be the width where you start to see the issue.

As for the larger image being slightly off, I think this is due to the container being a different size from our testing. Ahh, this is tricky. Basically the square image is set to 450×450, and the wide image 900×450, which works fine when they aren’t resized, but obviously the wide image will resize less as it gets smaller. Will have to have a think about this..

Site looks great by the way!

– Ed

[fabrikgrafik]

Thanks a lot for the help, that fixes my first issue indeed. 1315px was the breaking point.

I’ve been playing around with some css and js hacks for the second issue but no succes so far. I don’t wanna lose the right aspect ratio of the image. I’ll try some more when the rest of the site is finished.

It would be awesome if you can keep me posted if you find a solution for this.

Thanks again!

[Swift Ideas – Ed]

Yeah, that’s the thing – we’ll see what we can do from our side. Needs some more testing to improve the handling, just a very tricky issue to try and adjust the height/width to fit based on the image size and the height of the standard square icon.

Let me know if you come up with any ideas.

– Ed

[Swift Ideas – Ed]

Just sorted this! Send me an email via: http://themeforest.net/user/swiftideas and I’ll provide you the latest build before update if you need it.

– Ed

[fabrikgrafik]

Great! I’m launching the website the 1st of august. Will this fix be in the next update and will this be before August? Then I can wait for the update … if not, it would be awesome to have the latest build ([email protected]).

Thanks again, really happy about how this theme works out for me. Saved me a lot of time in a very busy period.

[Swift Ideas – Ed]

Hi @fabrikgrafik

Yes it will be before then, hopefully in the next few days.

You’re welcome, very glad you’re happy and enjoying using it!

– Ed

[fabrikgrafik]

Hi Ed,

Looks like there is still a little problem on big screens when browsing with firefox. (I use the latest version of firefox on OSX Mavericks). The third column disappears and they turn into 2 columns. On Safari and Chrome everything is ok now.

you can check it out on my latest version.
http://www.fabrikgrafik.be/2014TMP

Thanks!

[Rui Guerreiro – SUPPORT]

Hi,

Will assign the topic to Ed so he can assist you.

Thanks.

-Rui

[Swift Ideas – Ed]

Looks like your custom css is breaking this..?

https://www.dropbox.com/s/7o92e792huh9xau/Screenshot%202014-08-02%2002.13.51.png

[fabrikgrafik]

Yes, but thats the line of code I’ve included because you told me to in the post above. If I keep that line of code out of there, I still have an issue with 3-column views. For example the screenshot below:

You can test it if you want … I left that line out now:
http://www.fabrikgrafik.be/2014TMP

The third thumb should be on the right top spot in the first row, now it’s on left side in the second row.

[Swift Ideas – Ed]

Ahh I see. Unfortuantely this is a Safari/Firefox browser issue, with the way they deal with percentage widths. I’m following up with the isotope script developer for a workaround. For now, this seems to work well:

.multi-masonry-items .portfolio-item.col-sm-8 {
width: 66%;
}
.multi-masonry-items .portfolio-item.col-sm-4 {
width: 33%;
}

– Ed