-
Posts
-
I need to wrap multiple grid rows in a custom container for unified background image. How can i do this?
I tried to add a codeblock with following jquery, but somehow the layout builder auto-closes that first open div.jQuery("#grid-row1").before('<div class="my-custom-background-image">'); jQuery("#grid-row3").after('</div>');What I need to do is:
<div class="my-custom-background-image"> [first grid row 1/3] [first grid row 1/3] [first grid row 1/3] [second grid row 1/3] [second grid row 1/3] [second grid row 1/3] [third grid row 1/2] [third grid row 1/2] </div>Hi jaripp!
I don’t see an easy way of going about this. The grid row elements will close the parent container and open a new section. This lets them expand to the full width of the screen.
I think you would have to copy the HTML that get’s displayed on the page and then paste it into the HTML editor when editing your page to be able to do that. Otherwise you would have to do a bunch of editing in the PHP files and it would have to be considered custom work.
Or perhaps you could do something like set a background for each grid row and then use CSS to change the background position so it lines up.
Best regards,
Elliott
- You must be logged in to reply to this topic.