Margin and padding errors 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...
- get the same gutters in between objects like here https://www.sinnesfreunde.de/messe-catering/messe-party/
- and get the boxes to all have the same height again?
Many thanks in advance and best regards,
Daniel
Comments
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.
thanks
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
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
Hi Pablo,
I am already using the "grid" setting...
and I am using the same CSS class for both pages:
and yet they look and behave completely different in terms of margins (left ?? / right ??):
and this definately changed with the big update...
Looking forward to hear if you have any ideas.
Many thanks and
best regards,
Daniel
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
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
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.
Don't you have any CSS code applied for font size limited to the single page only?
Thanks
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:
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:
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
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