Breakpoints

Hi,
Thanks for your question but when I check both sections have the same, at 425px, mobile phone, they have one picture in each row, and at 768px, tablet, each row has two images.
Please see the screenshots in the Private Content area.
I checked with Chrome on Windows and an Android phone.
What device did you use, please include a screenshot and paste the image URL in your post.

Best regards,
Mike

Hi,
Thanks for the feedback, I check the sizes that you recommended and see that the top gallery is showing two images per row at 488px, while the second area is only one wide. But the second area doesn’t look like a gallery element, it is many 1/4 columns each with a text block element with an image.
Trying to make the columns behave like the gallery element would not be easy and would not be exact, I would recommend using the same elements for both “galleries”.
I believe that your client is changing the size of the browser window and comparing the “in-between” device sizes, if you check the standard device sizes:
375px
425px
768px
1024px
1440px
the top and bottom “galleries” match in their row width. Did your client have any issues with the space between the images? The bottom “gallery” using the 1/4 columns has much more spacing. Try using the 1/4 columns for the top gallery also and they will match much closer.
Your client screenshots are not showing for us, try logging into the forum to paste the url to your screenshots using an Screenshot service.

Best regards,
Mike

Hi,
You can enable the “scroll to top” button for mobile this this css in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
    display: block;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
To add a caption below your gallery items, you can use this css from our documentation:

/* Display caption below thumbnail */
#top .avia-gallery .avia-gallery-thumb a:after {
content: attr(title);
margin: 10px 0;
position: relative;
display: block;
width: 100%;
font-size: 14px;
text-align: center;
}

adjust the css font size and margin to suit, after applying the css clear your browser cache.
and use the caption field:

the expected results:

Or try using the masonry gallery element for both galleries, the first one without captions and the second one with captions, again use the caption field:

then choose to show the caption excerpt always:

the expected results:

Best regards,
Mike

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard