Scaling issue and gallery settings

Hi,

Thank you for using Enfold.

1.) The site looks responsive (screenshot: https://imgur.com/a/kTrDR). Could you provide a screenshot of the issue?

2.) In the “jaymiron” site, the gallery items’ width and height were defined manually. This is the html tag.

<article class="cf gallery-styles gallery-style-3 col-lg-12">
<figure class="col left ">
<div class="bg-cover img-link lazy-load desktop-device" data-original="https://www.jaymiron.com/wp-content/uploads/2015/05/Harookz-JMF-42-1200x800.jpg" style="background-image:url(https://www.jaymiron.com/wp-content/uploads/2015/05/Harookz-JMF-42-1200x800.jpg);"></div></figure>
<figure class="col left ">
<div class="bg-cover img-link lazy-load desktop-device" data-original="https://www.jaymiron.com/wp-content/uploads/2015/05/Harookz-JMF-43-1200x800.jpg" style="background-image:url(https://www.jaymiron.com/wp-content/uploads/2015/05/Harookz-JMF-43-1200x800.jpg);"></div></figure>
<figure class="col left ">
<div class="bg-cover img-link lazy-load desktop-device" data-original="https://www.jaymiron.com/wp-content/uploads/2015/05/Harookz-JMF-44-1200x800.jpg" style="background-image:url(https://www.jaymiron.com/wp-content/uploads/2015/05/Harookz-JMF-44-1200x800.jpg);"></div></figure>
</article>

And the css code.

.gallery-style-3 figure:nth-child(1),
.gallery-style-right-3 figure:nth-child(1) {
	width: 32%;
}

.gallery-style-right-3 figure:nth-child(2),
.gallery-style-right-3 figure:nth-child(3),
.gallery-style-3 figure:nth-child(2),
.gallery-style-3 figure:nth-child(3) {
	width: 66%;
}

/*--------------------------------------------------------------------
		Advanced galleries fixed heights and margin
--------------------------------------------------------------------*/
.gallery-style-right-3 figure:nth-child(2),
.gallery-style-3 figure:nth-child(2) {
	margin-bottom: 26px;
}

.gallery-style-2 .img-link,
.gallery-style-3 figure:nth-child(1) > .img-link,
.gallery-style-right-3 figure:nth-child(1) > .img-link {
	height: 626px;
}

.gallery-style-right-3 figure:nth-child(2) > .img-link,
.gallery-style-right-3 figure:nth-child(3) > .img-link,
.gallery-style-3 figure:nth-child(2) > .img-link,
.gallery-style-3 figure:nth-child(3) > .img-link  {
	height: 300px;
}

Best regards,
Ismael

Hi,

Please edit your Masonry element and choose “Perfect Manual Masonry” in Size setting. You can add “portrait” tag to your post on your left and “landscape” to the ones on the right.
If you would like us to look into it for you, please create a temporary admin login and post it here privately.

Best regards,
Yigit

Hi,

Could you please post username as well? I tried “admin” but it did not work :)

Best regards,
Yigit

Hi,

I guess you answered my question on how to do it. If I am not mistaken there isnt a way to do it with the given templates and the only way to achieve it I must enter CSS codes manually

Yes, unfortunately, that is not doable with the masonry elements alone so the css modifications above are required. You may also have to add the html tags manually in a text or code block. You can set the masonry columns to two and the size settings to “Perfect Automatic Masonry” but the size of each column will be 49%-50% of the whole container.

Best regards,
Ismael

Hi,

Did you use the html tags in a code or text block? Please provide the login details in the private field. We’ll create a test page.

Best regards,
Ismael

Hi,

We added the html codes in a code block and modified the css codes a bit. ( see private field )

Best regards,
Ismael

Hi,

You need to add more css media query to make it responsive on mobile view. Please edit the code block then look for the src attribute of the img tag. Adjust the image url.

Best regards,
Ismael