Beaver Builder Post module styling – aligning elements

Author Posts

zholy9

Hi…

I’m having a bit trouble with styling the POST module from Beaver Builder to my needs. What I want to achieve is having the post module to be displayed as a “screen” on an Ipad background image (of course responsible)

Since the POST module is made out of several other “items” … I’m having hard time to adjust the dims & position (when using ABSOLUTE) as a whole thing.
MT offers me several options to style (like MASONRY or POST DIV) … though when applying the aboslute position, it doesn’t do anything).

Had partial success while styling each element of the module separately…though not sure, if that’s the right approach ?

Here is the testing site with what I want to achieve : http://www.ufocused.com/row … (the left side)

Thank you in advance, for any advice.

Kind regards, Zdenek


Sebastian

Hey Zdenek,

Thanks for sending access details. When I started work on your problem I noticed a Microthemer bug, which I’ve now fixed. Disabled selectors did not remain disabled across different page loads. Disabling worked immediately, but didn’t persist as it should. The selectors in the menu were marked as disabled. But then the CSS styles were still written to the stylesheet. And I think this may have made the task you were working on more difficult. Given your tactic of disabling your previous attempts (which is a good one BTW).

I’ve released an update to MT, which I’ve installed on your test site. I noticed that your ‘Masonry’ selector does indeed respond to absolute positioning. This may be as a consequence of successfully disabling the other selectors you were trying out.

I think applying positioning to the outermost container element (e.g. the masonry selector) is the right way to go. Rather than applying this to the items contained within.

However, I’m not 100% sure of your end goal when you say you want “the post module to be displayed as a “screen” on an Ipad background image“. I you could please elaborate on this I will provide guidance on the best approach.

Thanks,
Sebastian


zholy9

Hi Sebastian.

Thank you for such quick reply. Basically, what I’m trying to achieve is an effect, that would make the POST MODULE being displayed on the iPad. The iPad (if I remember correctly) is set as a background image of the left column. And with “position: absolute” I want the post module be positioned as the screen of the iPad.

Hope this made it a bit clearer 🙂

Thank you in advance.

Zdenek


Sebastian

Aha! I see what you mean now. I thought you were referring to making the site look a certain way at the iPad screen size. You actually mean you want to align the post module with the picture of an iPad in the photo. That’s a very nice idea. But will be difficult in practice. It’s a challenge I would find intimidating myself. Mainly because of the requirement for it to be responsive. Getting the post content to scale down in the exact same way the iPad in the image scales down is probably near impossible.

I’ve aligned the post with the iPad on your test site to demonstrate. Drag the top ruler to the left and observe how they become misaligned. I set the dimensions and the positioning in percentages in the hope it might align slightly better than fixed pixel values, but to no avail. From my initial experimentation, I would advise giving up on the idea. Not something I ever say lightly. But in this particular case, I think it would be too complicated to achieve.

Sorry I don’t have a better response! Does my explanation make sense to you?

Cheers,
Sebastian


zholy9

Hi Sebastian …

I think I found another strange behaviour / possible bug. I wanted to start from scratch and and re_do the left side and this is what happens :

I have the 2 columns. Both of them have photo module. When MT is deactivated and I drag the POST module under the picture in left column, everything is as it should be.
But with MT activated, it will add the iPad picture as a background behind the post module ? That shouldn’t be like that.
I even installed WP_Rocket cache plugin, as I was suspecting the cache, but nope … it’s MT.

Feel free to check it out please…will leave it untouched.

Kind regards, Zdenek


Sebastian

Hey Zdenek,

What you describe was due to some extra styling I added when I was trying to find a workable solution to lining up the post with the iPad image. Sorry! I left it in there for you to see for yourself why I drew my conclusion.

As a first recommendation I was going to say that the post element should be a child of an element with the iPad image set as a background image. When using absolute positioning to align things, the parent child relationship is important. Absolutely positioned elements top/bottom/left/right values are relative to their first parent element that has a non-static position value set (any value apart from ‘static’).

If there is any one CSS property that’s worth properly reading up on, I think it’s the position property. The tutorials at the bottom right of this page are worth a read: https://themeover.com/position/

I’ve disabled my selectors now so you shouldn’t get the ipad background image on all post modules now!

Cheers,
Sebastian

You must login or register to reply to this topic.