Full width responsive box

workarounds
javascript
design

#1

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?


#2

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 :point_down:, 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!


#3

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.


#4

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


#5

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?


#6

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