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!

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.

Oh well even better! Feel free to reach out with any other questions 😃

This code works great, but for some reason it is changing the position of my box and it moves it above the images that it should be below. Any ideas on that?

Here is what it looks like in the preview with the code implemented:

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

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!

=)

Love when that happens! Thanks for closing the loop @Tiffer!

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

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: