Tagged: masonry grid
-
AuthorPosts
-
June 3, 2016 at 5:32 pm #642642
Hello
I’m trying to remove the margins/padding of the masonry grid for mobile only, to widen the grid itself to be like 90% screen width. Right now on mobile, the grid shows a wide left and right margin, allowing less space for the images in the grid. I do not wish to change the spacing between each image, just the margins on the left and right of the entire grid itself.
Screenshot showing what I mean: http://goo.gl/45QjK6
June 3, 2016 at 7:35 pm #642676Hey enfold4phil,
Please use the gallery element inside a color section. You can then add custom #ID to the color section to target it using css and remove the padding in mobile version.
/*Desktop */ #customID { padding: 150px!important; } /*Mobile*/ @media only screen and (max-width:768px){ #customID { padding: 0px!important; } }
Let us know if you have any questions.
Best regards,
VinayJune 3, 2016 at 11:36 pm #642755Hi Vinay
Thanks for the quick reply. Unfortunately this didn’t work. I added the masonry into a Color Section, added the ID, and added the CSS. I see in Chrome’s “Inspect” console the padding: 0px !important being applied, but the masonry is still not full width.
I also tried to add an ID within the masonry itself, but still no luck.
June 6, 2016 at 5:49 am #643272Hi,
Add this in the Quick CSS field to increase the width of the container inside the #masonry_full_width section:
#masonry_full_width .container, #masonry_full_width .template-page { width: 100%; max-width: 100%; padding: 0; }
Best regards,
IsmaelJune 6, 2016 at 5:47 pm #643506We’re closer, but unfortunately this is only working at 465 pixels wide and above. When I minimize the screen to 464 pixels or less, the masonry grid is not full width anymore. I added !important to all 3 lines as well. Now on mobile, the masonry grid is off-centered too, the same width as before.
June 8, 2016 at 2:51 am #644460Hi,
Add this css code:
@media only screen and (max-width: 464px) { .responsive.html_stretched .av-masonry-entry { max-width: 90%; } }
Best regards,
IsmaelJune 8, 2016 at 8:25 pm #645039A combination of all of the above codes worked! Thank you!! For anyone else finding this thread, here is my final CSS:
/* Media - Masonry Gallery - Makes masonry gallery full width on mobile devices */ @media only screen and (max-width: 464px) { .responsive.html_stretched .av-masonry-entry { max-width: 45%; } #top .container .av-masonry.av-large-gap { margin-left: 20px; } #masonry_full_width .container, #masonry_full_width .template-page { width: 100% !important; max-width: 100% !important; margin: auto !important; } }
- This reply was modified 8 years, 5 months ago by enfold4phil.
June 9, 2016 at 9:00 am #645309Hi,
Great, glad you got it working and thanks for sharing the solution :-)
Cheers!
RikardJuly 16, 2021 at 11:45 am #1310385Hi Theme Enfold,
I have a problem with the Blog Masonry onLoad. When the masonry loads, there are huge spaces below the different entries. s. printscreen and link in private content.
When I scroll down after a while, (maybe once it had the time to load everything) it seems to reorder and it looks good. Also if I change screen width or click on a filter it settles to what it should look like.
Do you have an idea how to fix this?
All effects also Lazy Loading are turned off.
- This reply was modified 3 years, 3 months ago by Onlineplaner.
July 18, 2021 at 6:21 pm #1310618Hi,
Thank you for your patience, please try disabling Autoptimize and your caching plugin, above you said that your Lazy Loading is disable but the images still have the lazyloaded class which can be added by other plugins such as Autoptimize, I see that your images are served by cdn.shortpixel.ai can you try it with local images?Best regards,
MikeJuly 19, 2021 at 1:40 pm #1310733Great. Smush was the plugin that made the problems.
Thank you!
July 20, 2021 at 6:11 am #1310821 -
AuthorPosts
- You must be logged in to reply to this topic.