Tagged: align elements, Beaver Builder, post module
- This topic has 5 replies, 2 voices, and was last updated 7 years, 9 months ago by
Sebastian.
| Author | Posts |
|---|---|
 zholy9
July 3, 2017 at 8:13 am
|
Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date. 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. 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
July 3, 2017 at 1:06 pm
|
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, |
|
zholy9
July 3, 2017 at 1:47 pm
|
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
July 3, 2017 at 4:36 pm
|
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, |
|
zholy9
July 3, 2017 at 8:26 pm
|
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. Feel free to check it out please…will leave it untouched. Kind regards, Zdenek |
|
Sebastian
July 4, 2017 at 8:28 am
|
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, |
