Tagged: Masonry Gallery
-
AuthorPosts
-
June 1, 2016 at 3:57 am #641154
Hi, I have several issues and questions about the theme:
1. Extra gap around mansard grid
For the masonry grid, when I set no gap, the image grid still has a very thin white gap on the right as shown in the screenshot. When I set 1 pixel gap, the right gap still looks larger then the left gap. Is there a way to solve it.
2. Define custom masonry gap between elements
Is there a way to define custom gap between elements besides current options of no gap, 1 and large.3. Lightbox window size
For lightbox window size and background image opacity. I used following css to increase window size to 1280 and bg black opacity to 0.9 showing less original content..mfp-iframe-holder .mfp-content {
max-width: 1280px;
position:center;
top:30px;
}.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader {
opacity: 0.9 !important;
background: black !important;
}This works on fullwidth slide element, when I click an image/video link. But when I use masonry gallery, it seems the Lightbox window and bg opacity still use the default setting. The window is smaller then 1280 pixel. My uploaded image is 1920×1080.
Could you list the reference for all the essential lightbox CSS formats, so that I could customise lightbox frame’s size, position, and icons.
4. Masonry overlay
I would like to customise the masonry grid’s overlay frame, such as size, position, colour, opacity, font size, font colour, font opacity…
Also I wonder if I could replace with my own overlay design instead of a simple rectangular frame. And, how to set a different parameters for mobile. I currently use these css to change overlay opacity on the mobile. But I also need to change its position and size(height) as well as the font colour. Since the default black colour won’t be readable on a transparent overly frame. I’d like to set a black overlay frame with white title.5. Hide lightbox arrow icon on mobile
Since the lightbox effect on mobile makes the popup image a very limited space, I don’t want to show the arrow icon and title text which severely distract the image.
Also on mobile, is there a way to make image full screen when I click an image link or a link in the masonry grid. Since the limited space on mobile is not ideal for lightbox effect. It’s better if the user could simply view image in full screen and be able to zoom and pan freely.6. Text color
After I set primary font colour to a certain colour, everytime when I set a word to bold in the Text Block, it automatically switches to that colour. Can I make its colour not bond to the primary colour settings. Since I just simply want to set a black bold text when the main paragraph font colour is black.7. Re-order masonry categories items, not the image grid, but the names of the categories.
I’d like to customize the order of the category items not the grid images. Please see attached.
If this could not be achieved. Can I hide the categories on Mobile which takes a lot of space, or can I decrease the font size of the category items on mobile.
8. Different font size on mobile
How can I set different font size on mobile, including main paragraph size, overlay font size.9. Customized overlay shape
When using a fullwidth slide, it shows a default overlay icon when I hover on the image link. Is there a way to replace it with my own design (jpg, or animated gif)10. Automatically link to different url based on ip address
I wonder if there is an ip detect plugin compatible with Enfold that determines user’s ip address and automatically link to different url. Since in China, vimeo and youtube are blocked, I’d like to create one link, while have users in China access automatically towards Chinese video site and users in other countries still access links to vimeo.June 2, 2016 at 12:12 pm #641985Hey Yan,
please open different tickets for different questions/issues and let’s stick to your first issue only here.
1.) Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- the URL to the login screen
- a valid username (with full administration capabilities)
- as well as a password for that username
Best regards,
AndyJune 8, 2016 at 7:18 am #644580Hello,
The information you need is listed here in the private area.
For Issue 1. I also noticed that the gap appears above certain browser width. If you make browser full width on a screen which is either an general desktop resolution or ipad, ipad pro, the problem exists. But if you reduce the browser to half width, the gap disappears.June 9, 2016 at 8:39 am #645290Hi,
Thank you for the info. Increase the width of the masonry container:
.av-masonry-container.isotope { width: 102%; }
Best regards,
IsmaeloJune 9, 2016 at 9:46 am #645332Thanks, it works perfectly!
yan
June 10, 2016 at 6:08 am #646033 -
AuthorPosts
- You must be logged in to reply to this topic.