Support Center Visit Demo License manager Buy @ envato

Margin and padding errors in Blog

ISAR3ISAR3
in Blog

Hi there,

I´m working on this website https://www.sinnesfreunde.de/fullservice/ and have a problem with the vertical paddings and marings between the blogs.

Before the "big update" with the BeBuilder all boxes had the same height and the "standard spacing" (30 px or so) in between them.

Now – even if I delete all my custom CSS for this class – the spaces in between are not correct. And that allthough they are correct here at the bottom: https://www.sinnesfreunde.de/messe-catering/messe-party/

Could you please help me...

  1. get the same gutters in between objects like here https://www.sinnesfreunde.de/messe-catering/messe-party/
  2. and get the boxes to all have the same height again?

Many thanks in advance and best regards,

Daniel

Comments

  • PabloPablo

    Hello Daniel,

    This is because we changed our layout display to the flexbox which is more powerful and does not need any javascripts tweaks that we used before to achieve that, what is a single line with CSS. It's making our theme faster and allows for more complex layouts.

    But, we know that for customers who used our theme before the big update it could be problematic, whats why we created the video tutorials, just to make the flexbox familiar for them.

    https://support.muffingroup.com/video-tutorials/flexbox-positioning-with-bebuilder/

    thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • ISAR3ISAR3

    Hey Pablo,

    thanks for the tutorial and you help... but the element I am using on the website is a blog – and all the alignment tools don´t seem to work here... speically as the blog is all "one element"... could you give me a hint here please?

    Best regards,

    Daniel

  • PabloPablo

    Okay, sorry, the flexbox solution won't work here.

    Also, it is not possible that these box had the same heights because the layout you use is related with masonry(isotope), so the heights are different. You would have to use the layout like "Grid" to make it more "equal".

    We cannot do any customizations, because it's all handled by the Javascript.

    Also, we did not change anything related to the blog element.

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • ISAR3ISAR3

    Hi Pablo,

    I am already using the "grid" setting...

    Bildschirmfoto 2022-09-14 um 12.31.12.png

    and I am using the same CSS class for both pages:

    Bildschirmfoto 2022-09-14 um 12.31.06.png

    and yet they look and behave completely different in terms of margins (left ?? / right ??):

    Bildschirmfoto 2022-09-14 um 12.34.35.png

    and this definately changed with the big update...

    Looking forward to hear if you have any ideas.


    Many thanks and

    best regards,


    Daniel

  • PabloPablo

    Sorry, I through that you want to make them ideal equal, to end on the same line - my bad.

    As I see, both links now displays the same, I assume you are changing settings, please tell me, what you did that spaces appearaed again.

    What I found in CSS codes, you made some tweaks with the margins and it can be problematic for that element due to top/left positions applied into the blog element by theme.


    But, with making these boxes ideal equal using Blog element will be not that easy, because it will all depends on amount of the text inserted into, this amount must be nearly the same.

    Won't be it better to recreate it using BeBuilder column element?

    thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • ISAR3ISAR3

    Hi Pablo

    thank you for your response – but, no... I did not change settings to make the spaces appear again – both pages have the same settings, but the spaces appear different. You can compare it yourself here:


    #1 = This is not looking good (wrong spaces):

    https://www.sinnesfreunde.de/messe-catering/messe-party/


    #2 = This page has the same settings, but the spaces are correct:

    https://www.sinnesfreunde.de/messe-catering/messe-party/


    Coud you please help me get the spaces like #2 ?


    Many thanks and best regards,


    Daniel

  • PabloPablo

    You have like +300 lines of Custom CSS code which changes the blog element completely, this is really huge amount to be honest and you have to know that some problems could appear between the versions.

    But, after removing it I noticed, that problem is not with the margin itself, but with the font sizes, take a look on them.

    image.png

    Don't you have any CSS code applied for font size limited to the single page only?

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • ISAR3ISAR3

    Hi Pablo,

    I´ve deleted all my custom CSS for this element – and yet there still is a positioning error that only shows on the full-service-page: https://www.sinnesfreunde.de/fullservice/.

    Have a look (left the correct display from https://www.sinnesfreunde.de/business-catering/kundenevent/ - on the right the error on the full-service-page:


    Bildschirmfoto 2022-09-15 um 10.24.29.png


    On the full-service-page every blog-post has an "absolute" positioning "inline" - and I just don´t see where this comes from – see it here:


    Bildschirmfoto 2022-09-15 um 10.26.16.png


    Do you have any ideas, where this could come from, and why the "full-service-page" has absolute-positioning and the other page does not?

    Many thanks and

    best regards,


    Daniel

  • ISAR3ISAR3

    Hi Pablo,

    sorry – mission accomplished. It was a mixture of the font size (you were right) and the setting "Colums remove vertical margin" in the section settings.

    Now it looks perfect on all pages again.

    Many thanks and best regards,

    Daniel

Sign In or Register to comment.