Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 21, 2022 at 2:52 pm #1341658
    Veronika

    Hi dear Kriesi-team,

    I am trying to add a 30px padding between the posts in the masonry on my “all posts” page. I found this thread: https://kriesi.at/support/topic/padding-in-masonry/

    I tried the code but nothing changed. Is there anything else I could try?

    Thank you very much

    Best,
    Veronika

    February 21, 2022 at 3:06 pm #1341660
    Yigit

    Hey,

    Thanks for contacting us!

    I replaced your code with following one 

    .av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
  margin-right: 30px;
}

    Please review your website :)

    Cheers!
    Yigit

    February 21, 2022 at 5:15 pm #1341683
    Veronika

    Hi Yigit,

    thank you for correcting the code. Unfortunately now is my side not centered: https://imgur.com/mM7PBJF. How can I fix this?

    All the best,
    Veronika

    February 21, 2022 at 5:46 pm #1341689
    Yigit

    Hey,

    I edited your Masonry element and gave it a custom ID “all_posts” to make sure it does not affect other elements and then changed the code to following one 

    #all_posts.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
  margin-right: 30px;
}
#all_posts .av-masonry-container {
  width: calc(100% + 30px);
}

    Regards,
    Yigit

    February 21, 2022 at 5:57 pm #1341692
    Veronika

    Hi Yigit,

    unfortunately we are still not there yet, since the padding is no equal : https://imgur.com/B5l5G3y it should be 30px between the posts and 30px right and left from the end of the page.

    Ihm very thankful for your help :)

    All the best,
    Veronika

    February 21, 2022 at 6:04 pm #1341701
    Yigit

    Hi,

    Thanks for elaborating! I changed following code you have in Quick CSS field 

    .av-post-content-container2 .container {
	width: 96%;
}

    to following one

     .av-post-content-container2 .container {
  width: 100%;
  padding: 0 30px !important;
}

    It should be working fine this time :)

    Best regards,
    Yigit

    July 12, 2022 at 3:45 pm #1358094
    Veronika

    Hi,

    it seems to work perfectly for the web version. Unfortunately not on the mobile version. Do I need to adjust the code or is something different interfering?

    Thank you

    Best,
    Veronika

    July 13, 2022 at 8:28 am #1358164
    Nikko

    Hi Veronika,

    Please try to add this CSS code:

    @media only screen and (max-width:767px) {
  #top .container .av-masonry.av-large-gap, 
  #all_posts .av-masonry-container {
    width: 100%;
  }

  #all_posts.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
    margin-right: 0;
  }
}

    Best regards,
    Nikko

    July 13, 2022 at 1:08 pm #1358198
    Veronika

    Hi Nikko,

    now the right side is bigger: https://imgur.com/aIBOTzE it is still not even, unfortunately.

    Thank you

    Best,
    Veronika

    July 13, 2022 at 3:39 pm #1358213
    Yigit

    Hi Veronika,

    I added following code to Custom CSS

    @media only screen and (max-width: 480px) { 
#all_posts.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
			margin-right: 20px;
		}
}

    Please review your website :)

    Best regards,
    Yigit

    July 13, 2022 at 6:03 pm #1358230
    Veronika

    Hi Yigit,

    thank you very much! It solved to problem. You can close this now, Thank you!

    Best,
    Veronika

    July 13, 2022 at 8:16 pm #1358256
    Yigit

    Hi,

    You are welcome! Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘masonry padding’ is closed to new replies.