Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 3, 2016 at 5:32 pm #642642
    enfold4phil

    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 #642676
    Vinay

    Hey 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,
    Vinay

    June 3, 2016 at 11:36 pm #642755
    enfold4phil

    Hi 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 #643272
    Ismael

    Hi,

    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,
    Ismael

    June 6, 2016 at 5:47 pm #643506
    enfold4phil

    We’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 #644460
    Ismael

    Hi,

    Add this css code:

    @media only screen and (max-width: 464px) {
.responsive.html_stretched .av-masonry-entry {
    max-width: 90%;
}
}

    Best regards,
    Ismael

    June 8, 2016 at 8:25 pm #645039
    enfold4phil

    A 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, 6 months ago by enfold4phil.
    June 9, 2016 at 9:00 am #645309
    Rikard

    Hi,

    Great, glad you got it working and thanks for sharing the solution :-)

    Cheers!
    Rikard

    July 16, 2021 at 11:45 am #1310385
    Onlineplaner

    Hi 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, 5 months ago by Onlineplaner.
    July 18, 2021 at 6:21 pm #1310618
    Mike

    Hi,
    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,
    Mike

    July 19, 2021 at 1:40 pm #1310733
    Onlineplaner

    Great. Smush was the plugin that made the problems.

    Thank you!

    July 20, 2021 at 6:11 am #1310821
    Rikard

    Hi Onlineplaner,

    Great, I’m glad that you found the cause of your problem.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.