Full width responsive box

  • 31 October 2017
  • 10 replies
  • 261 views
D

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?

10 replies

Jess
Rank
Userlevel 7
Badge +1

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!

D

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.

Jess
Rank
Userlevel 7
Badge +1

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

Celeste_Grupman

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?

49

Celeste_Grupman

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

55

Tiffer
Badge

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

Tiffer
Badge

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!
=)

Jess
Rank
Userlevel 7
Badge +1

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

Ed_Stanfield
Badge

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

I

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:

Reply


Terms & ConditionsCookie settings