Hey, I’m trying to find a way of creating a full-width box, I mean a box that streches to the border of the screen inside a section. I’m trying to achieve this ↓ ↓ ↓
Haven’t been able to stretch it through, any ideas, suggestions?
Hey all, I just wanted to add this code here. If you want to use this script for multiple boxes, you’ll need to assign different “Var” names for each one. Here’s an example:
I’ve used that same trick in the past in order to keep text OUT of the full width box. As long as the text is stacked above the box and then positioned on top of box, it will appear on top when published.
BUT: just recently I used this js for the full width box, and the technique isn’t working anymore. I have the text stacked above the full width box in the builder. But, when published, it presents itself below the box - so the text is essentially hidden behind the box.
I have no idea why this doesn’t work anymore.
script
var e = jQuery(’#lp-pom-box-1318’); //Replace with your element ID
var a = jQuery(’.lp-pom-root’);
e.css({‘left’:0, ‘width’:‘100%’, ‘box-sizing’:‘border-box’}).prependTo(a);
/script
Love when that happens! Thanks for closing the loop @Tiffer!
I fixed my own problem. I moved the text out of my white box and into the image section (image is set as section background), then held the CTRL button as I moved it on top of the box where I wanted the text to appear. Easy work-a-round!
=)
Hi I have my box centered! Yay! But for some reason I’m not able to center the text inside it! I’ve tried a couple methods, but won’t seem to center: https://services.bilh.org/spine/
Screenshot: https://www.screencast.com/t/LugnxvSQIZqW
Thanks
Thanks. We actually found a way around.
It’s not the best way but we made it work. Either way, we’ll try to use your code to see if it works fine.
Thanks.
Hey @Dig57!
I reached out to Noah, one of our Senior Technical Support Specialists, and he provided a script here that should help you achieve this!
Use this script 👇, and update the element ID’s pertaining to which box you’re wanting to display full-width, and that should do it!
<script>
var e = jQuery('#lp-pom-text-120'); //Replace with your element ID
var a = jQuery('.lp-pom-root');
e.css({'left':0, 'width':'100%', 'box-sizing':'border-box'}).prependTo(a);
</script>
Please do let me know if that doesn’t work and I’ll help troubleshoot!
I’m definitely going to turn this into a standalone post as well, as I’m sure this will help others in a similar situation, so thanks for bringing this to our attention!
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.