Problems with a padding on masonry layout, doesnt obey in the top and below padd

  • Resolved Felipe Garofalo

    (@felipegarofalo)


    4 years, 11 months ago

    I’m making gallery pages with photonic using my flickr gallerys as server. So, without any know reason the Masonry Layout begin to show a padding below the images. Even with the padding reset for 2px, the padding between lines is way more thick. I didnt found here something that looks alike with this on the forum. Anyone knows how to fix this issue?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Felipe Garofalo

    (@felipegarofalo)

    To test (and explain better my problem) I’ve run tha same photoset with 4 different layouts. So, the flickr gallery was showed with Square grid, Justified Grid, Masonry and Mosaic.

    Something hapens whean Masonry is populated by the photos.

    It looks like a padding (on horizontal) that is keeping lines apart besides the 2px padding configured.

    And doesnt occour in the other 3 layouts tested.

    It’s like the code is adding more padding that I’m configuring, but only to separet lines, not columuns.

    The page that I’m using to fiz this is https://felipegarofalo.com.br/nu-et-erotique/le-bain/

    Oh, and I’m using gutemberge editor

    Plugin Author Sayontan Sinha

    (@sayontan)

    This is coming from your theme, not Photonic. Your theme has a style defined for anything that uses the masonry class, to add a margin (not padding) of 1.5em at the top and bottom. So, Photonic is respecting the padding values you are setting, but your theme is adding a separate margin.

    I don’t know if your theme has an option to control the margin of its masonry layout. If it doesn’t, let me know.

    Thread Starter Felipe Garofalo

    (@felipegarofalo)

    Hi. Thanks for the return.

    The theme that I’m using doesn’t have a native option for changing masonry class option. Any ideas how can photonic can override the theme ?

    Your plugin is great by the way! Photonic rocks!

    Plugin Author Sayontan Sinha

    (@sayontan)

    You can add this from your WP dashboard under Appearance → Customize → Additional CSS:
    .photonic-masonry-layout .photonic-thumb a img { margin: 0 !important; }

    Thread Starter Felipe Garofalo

    (@felipegarofalo)

    Thanks… That work perfectly. And I started a support forum with the theme to overcome this.

    There is another thing happening with the masonry layout

    As far as I can tell when the image column ends with a bigger image than the first image of the right side column, the right side column starts with a dent, with a space tha puts the first image slitghly lower than the others

    You can see it here in the second column
    https://felipegarofalo.com.br/estudio/andrea-dos-santos/

    And here in the third
    https://felipegarofalo.com.br/estudio/optic-yellow-felt/

    Plugin Author Sayontan Sinha

    (@sayontan)

    Not sure if this has other repercussions, but you can try putting this in Appearance → Customize → Additional CSS:
    .photonic-masonry-layout .photonic-thumb { display: inline-block; }

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Problems with a padding on masonry layout, doesnt obey in the top and below padd’ is closed to new replies.