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: