Masonry Element Sizing

See the grid in the link….Something like this I would like to build

Hi Ismael, thanks for the reply. The current grid I’ve build is behind a stage plugin in wordpress. Not shure if a temporary login will work for that, but you can try. Please let me know if you can login.

On the startpage I’ve now built two versions I play around with. First with masonry grid and second with a grid row to build that look I want.
I would prefer the masonry. Because it’s also easier to handle and looks a bit more what I’m looking for.

If only the grid row can be used at the end it would be great if there’s a possibility to scale the picture only inside the containers on hover (no text scale and as mentioned the container should not be scaled too). You will see if you can login.

In custom css I already try to address some things. Please scroll down to /*Content Styles*/ and you will find the latest changes for the startpage.

Thanks

Hi Ismael, thanks for the reply. I think there was a misunderstanding now.

For the masonry gallery I’m searching a way to keep the elements aligned in height as it is build now but with a perfect grid.
I mean in general it would be cool to be able to build perfect grids with more interaction possibilities. It’s sometimes a bit hard in enfold if you’re not using only columns with the same height, like now in my case.

Or, if that’s not working, second possibility is to build the look with the grid element. I think your provided css code for the image element is already build in the image settings. I could change that without your code. What I would like to have there is, that only the picture zooms within the container and not the text too.
And to complete the look. I need the same styling/effect for the background image in the first column. Here I could only zoom the whole container and was not able to address only the background image just zooming inside the container.

Could you help me with this? The login link above should still be active.

Thanks

Hi Ismael, I’ve found a new way to build better what I want, using the portfolio entries and the masonry element. But when I build it, the settings are a bit strange. I don’t no why. I choose 2 columns on desktop width and the second and third entry are moving under the first. I choose 3 columns there and I see 2 columns as result. I also need a tip how to handle the picture sizes with the picture tags. Because first I want the 2 columns in the middle, now it’s more 1/3 and under screen width 990px the grid is not alligned anymore. I hope it’s just a sizing or tag problem.

Can you help here, please?

And is there a way to say here that every entry picture should switch to 16:9 when changing to mobile?
Link and login are again in private content.

I know it’s a totally new approach and now maybe more work. But the other approaches didn’t work.

Thank you.

That did it nearly. You’re right, working with the image element is much easier.

I added your css and placed new pictures as described but in my needed sizes. Screen width is 1600 and so my picture sizes are now 800×800 and 800×390.

But the bottom changes a bit when I change the sreen size in the dev tools. So at screen width between 880 and 950 it looks perfect. Am I’m going lower the right height is a bit more than on the left side. Am I’m going higher the right height is a bit lower than the hight of the left side. The bottom edge is walking.

I made 2 screenshots (see private content). It’s a bit frustating. I also tried to find out if there are still some auto margins inside an element. Found one in the avia image container, but that didn’t solve the problem.

I hope you still have an idea.

On top: Do you know how I can adress you custom css via a custom class? I already tried to place a custom class in your css and the columns, but that didn’t work. The best would be if I can extend the existing css code with your customisations. I already know how to place a custom css class, but I don’t know how it might work adressing your specific code.

Best regards

Hi, same problem.

Found something strange (see screenshot). Seems as it is a after section or something else. I don’t know but this might be the problem. It only appears at the bottom of the right picture. And it’s changing it’s height.

Hi Ismael,
I made alle pictures new from the scratch as I also changed the content width to 1300. I tried now for the portrait 650×650. For the landscape I tried 650×325, 650×320, 650×315.

650×320 fits good as long I don’t change the screen width under 1218px. After that the sizes of the images don’t change equally.

To controll that non of my custom css is responsible for that, I also deleted that. But that error still exists.

So I checked a bit more and found out that both flex_column av_one_half are not scaled equally. At screen width over 1218 the first column is 595x596px and the second is 595×595.84.
At screen width 1024 the first column is 457×460 and the second is 457×459.7.
At screen width 768 the first column is 329×334 and the second is 329×333.94.

I tested something more:
When I cange anything in your code part:
#top div .av_one_half {
margin-left: 10px;
width: calc(50% – 20px);
}
nothing changes. I also tried the code with !important. Also nothing. Maybe that’s the problem?

Hi Ismael…thanks for your help but I deleted the changes and rethink my design or search for another solution. The one pixel wasn’t my problem but the growing space between the columns. I don’t want to need to address a basic in design like the grid with custom css when using enfold.

As everything seems to be build from the scratch I think it’s a bug in the builder. Maybe you guys can check that and if it’s found, update it with a coming release.

Best regards