-
this is hard to explain…
I want the site split in half in the middle, but the content on both halves to lineup to the left and right , just like the regular content
I’m able to do this manually by adding padding by eye on desktop, but needs to be done dymanimically
Attaching image, hope it’s clear!
-
Hi there,
Would it be possible for you to share the page link? I can take a look at the current structure and suggest some solutions.
-
it’s not online but here is the code:
`<!– wp:generateblocks/element {“uniqueId”:”09fec604″,”tagName”:”div”,”styles”:{“display”:”grid”,”gridTemplateColumns”:”repeat(2, minmax(0, 1fr))”,”@media (max-width:767px)”:{“gridTemplateColumns”:”1fr”}},”css”:”.gb-element-09fec604{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:767px){.gb-element-09fec604{grid-template-columns:1fr}}”} –>
<div class=”gb-element-09fec604″><!– wp:generateblocks/element {“uniqueId”:”15457c83″,”tagName”:”div”,”styles”:{“backgroundColor”:”var(\u002d\u002dcontrast-3)”,”display”:”flex”,”justifyContent”:”flex-start”,”paddingTop”:”100px”,”paddingBottom”:”100px”,”paddingLeft”:”10vw”,”@media (max-width:767px)”:{“borderTopWidth”:”2px”,”borderRightWidth”:”2px”,”borderBottomWidth”:”2px”,”borderLeftWidth”:”2px”,”borderTopStyle”:”solid”,”borderRightStyle”:”solid”,”borderBottomStyle”:”solid”,”borderLeftStyle”:”solid”},”borderTopWidth”:”3px”,”borderRightWidth”:”3px”,”borderBottomWidth”:”3px”,”borderLeftWidth”:”3px”,”borderTopStyle”:”solid”,”borderRightStyle”:”solid”,”borderBottomStyle”:”solid”,”borderLeftStyle”:”solid”},”css”:”.gb-element-15457c83{background-color:var(\u002d\u002dcontrast-3);border-bottom-style:solid;border-bottom-width:3px;border-left-style:solid;border-left-width:3px;border-right-style:solid;border-right-width:3px;border-top-style:solid;border-top-width:3px;display:flex;justify-content:flex-start;padding-bottom:100px;padding-left:10vw;padding-top:100px}@media (max-width:767px){.gb-element-15457c83{border-bottom-style:solid;border-bottom-width:2px;border-left-style:solid;border-left-width:2px;border-right-style:solid;border-right-width:2px;border-top-style:solid;border-top-width:2px}}”} –>
<div class=”gb-element-15457c83″><!– wp:generateblocks/text {“uniqueId”:”758a7469″,”tagName”:”h1″,”styles”:{“textAlign”:”left”,”@media (max-width:767px)”:{“borderTopWidth”:”2px”,”borderRightWidth”:”2px”,”borderBottomWidth”:”2px”,”borderLeftWidth”:”2px”,”borderTopStyle”:”solid”,”borderRightStyle”:”solid”,”borderBottomStyle”:”solid”,”borderLeftStyle”:”solid”},”borderTopWidth”:”3px”,”borderRightWidth”:”3px”,”borderBottomWidth”:”3px”,”borderLeftWidth”:”3px”,”borderTopStyle”:”solid”,”borderRightStyle”:”solid”,”borderBottomStyle”:”solid”,”borderLeftStyle”:”solid”},”css”:”.gb-text-758a7469{border-bottom-style:solid;border-bottom-width:3px;border-left-style:solid;border-left-width:3px;border-right-style:solid;border-right-width:3px;border-top-style:solid;border-top-width:3px;text-align:left}@media (max-width:767px){.gb-text-758a7469{border-bottom-style:solid;border-bottom-width:2px;border-left-style:solid;border-left-width:2px;border-right-style:solid;border-right-width:2px;border-top-style:solid;border-top-width:2px}}”} –>
<h1 class=”gb-text gb-text-758a7469″>Left </h1>
<!– /wp:generateblocks/text –></div>
<!– /wp:generateblocks/element –><!– wp:generateblocks/element {“uniqueId”:”1ca19000″,”tagName”:”div”,”styles”:{“backgroundColor”:”var(\u002d\u002dbase)”,”display”:”flex”,”alignItems”:”center”,”textAlign”:”right”},”css”:”.gb-element-1ca19000{align-items:center;background-color:var(\u002d\u002dbase);display:flex;text-align:right}”} –>
<div class=”gb-element-1ca19000″><!– wp:generateblocks/text {“uniqueId”:”e7cc3480″,”tagName”:”h1″} –>
<h1 class=”gb-text”>Right</h1>
<!– /wp:generateblocks/text –></div>
<!– /wp:generateblocks/element –></div>
<!– /wp:generateblocks/element –><!– wp:generateblocks/element {“uniqueId”:”28c76ab4″,”tagName”:”div”,”styles”:{“backgroundImage”:”url(http://contractors.local/wp-content/uploads/2025/06/Gemini_Generated_Image_a4dsl5a4dsl5a4ds.webp)”,”backgroundSize”:”cover”,”backgroundRepeat”:”no-repeat”,”backgroundPosition”:”center”,”backgroundBlendMode”:”overlay”,”paddingTop”:”50px”,”paddingBottom”:”50px”,”backgroundColor”:”rgba(189, 40, 40, 0.86)”,”display”:”flex”,”justifyContent”:”center”,”paddingLeft”:”20px”,”paddingRight”:”20px”},”css”:”.gb-element-28c76ab4{background-blend-mode:overlay;background-color:rgba(189,40,40,0.86);background-image:url(‘http://contractors.local/wp-content/uploads/2025/06/Gemini_Generated_Image_a4dsl5a4dsl5a4ds.webp’);background-position:center;background-repeat:no-repeat;background-size:cover;display:flex;justify-content:center;padding:50px 20px}”,”metadata”:{“name”:”GP Hero Native”}} –>
<div class=”gb-element-28c76ab4″><!– wp:generateblocks/element {“uniqueId”:”af312461″,”tagName”:”div”,”styles”:{“display”:”flex”,”maxWidth”:”var(\u002d\u002dgb-container-width)”,”color”:”var(\u002d\u002dbase-3)”,”@media (max-width:767px)”:{“display”:”flex”,”flexDirection”:”column”},”alignItems”:”stretch”},”css”:”.gb-element-af312461{align-items:stretch;color:var(\u002d\u002dbase-3);display:flex;max-width:var(\u002d\u002dgb-container-width)}@media (max-width:767px){.gb-element-af312461{display:flex;flex-direction:column}}”} –>
<div class=”gb-element-af312461″><!– wp:generateblocks/element {“uniqueId”:”d4812e16″,”tagName”:”div”,”styles”:{“display”:”flex”,”flexDirection”:”column”,”@media (max-width:1024px)”:{“display”:”flex”},”textAlign”:”left”,”alignItems”:”flex-start”,”backgroundColor”:”#000000″,”paddingTop”:”0px”,”paddingRight”:”0px”,”paddingBottom”:”0px”,”paddingLeft”:”0px”,”marginTop”:”0px”,”marginRight”:”0px”,”marginBottom”:”0px”,”marginLeft”:”0px”},”css”:”.gb-element-d4812e16{align-items:flex-start;background-color:#000000;display:flex;flex-direction:column;text-align:left;margin:0px;padding:0px}@media (max-width:1024px){.gb-element-d4812e16{display:flex}}”,”metadata”:{“name”:”Hero Child”}} –>
<div class=”gb-element-d4812e16″><!– wp:generateblocks/text {“uniqueId”:”6a722248″,”tagName”:”h1″,”styles”:{“textAlign”:”center”},”css”:”.gb-text-6a722248{text-align:center}”} –>
<h1 class=”gb-text gb-text-6a722248″>Built For Movers<br></h1>
<!– /wp:generateblocks/text –><!– wp:generateblocks/text {“uniqueId”:”2184cd27″,”tagName”:”h2″,”styles”:{“textAlign”:”center”,”paddingTop”:”0px”,”paddingRight”:”0px”,”paddingBottom”:”0px”,”paddingLeft”:”0px”,”marginTop”:”0px”,”marginRight”:”0px”,”marginBottom”:”0px”,”marginLeft”:”0px”},”css”:”.gb-text-2184cd27{text-align:center;margin:0px;padding:0px}”} –>
<h2 class=”gb-text gb-text-2184cd27″>Tuned For Results<br></h2>
<!– /wp:generateblocks/text –><!– wp:generateblocks/text {“uniqueId”:”1ff845a4″,”tagName”:”h3″,”styles”:{“textAlign”:”left”,”paddingTop”:”0px”,”paddingRight”:”0px”,”paddingBottom”:”0px”,”paddingLeft”:”0px”,”marginTop”:”0px”,”marginRight”:”0px”,”marginBottom”:”0px”,”marginLeft”:”0px”},”css”:”.gb-text-1ff845a4{text-align:left;margin:0px;padding:0px}”} –>
<h3 class=”gb-text gb-text-1ff845a4″>Let your website handle the hustle when you’re off the clock. Turn your website into your hardest working crew member<br><br></h3>
<!– /wp:generateblocks/text –></div>
<!– /wp:generateblocks/element –><!– wp:generateblocks/element {“uniqueId”:”be4cb26f”,”tagName”:”div”,”styles”:{“display”:”flex”,”flexDirection”:”column”},”css”:”.gb-element-be4cb26f{display:flex;flex-direction:column}”,”metadata”:{“name”:”Hero Child”}} –>
<div class=”gb-element-be4cb26f”><!– wp:generateblocks/text {“uniqueId”:”c986290b”,”tagName”:”h1″,”styles”:{“textAlign”:”center”,”paddingTop”:”0px”,”paddingRight”:”0px”,”paddingBottom”:”0px”,”paddingLeft”:”0px”,”marginTop”:”0px”,”marginRight”:”0px”,”marginBottom”:”0px”,”marginLeft”:”0px”},”css”:”.gb-text-c986290b{text-align:center;margin:0px;padding:0px}”} –>
<h1 class=”gb-text gb-text-c986290b”>Built For Movers<br></h1>
<!– /wp:generateblocks/text –><!– wp:generateblocks/text {“uniqueId”:”ae66cc68″,”tagName”:”h2″,”styles”:{“textAlign”:”center”,”paddingTop”:”0px”,”paddingRight”:”0px”,”paddingBottom”:”0px”,”paddingLeft”:”0px”,”marginTop”:”0px”,”marginRight”:”0px”,”marginBottom”:”0px”,”marginLeft”:”0px”},”css”:”.gb-text-ae66cc68{text-align:center;margin:0px;padding:0px}”} –>
<h2 class=”gb-text gb-text-ae66cc68″>Tuned For Results<br></h2>
<!– /wp:generateblocks/text –><!– wp:generateblocks/text {“uniqueId”:”c8969973″,”tagName”:”h3″,”styles”:{“textAlign”:”center”,”paddingTop”:”0px”,”paddingRight”:”0px”,”paddingBottom”:”0px”,”paddingLeft”:”0px”,”marginTop”:”0px”,”marginRight”:”0px”,”marginBottom”:”0px”,”marginLeft”:”0px”},”css”:”.gb-text-c8969973{text-align:center;margin:0px;padding:0px}”} –>
<h3 class=”gb-text gb-text-c8969973″>Let your website handle the hustle when you’re off the clock. Turn your website into your hardest working crew member<br><br></h3>
<!– /wp:generateblocks/text –></div>
<!– /wp:generateblocks/element –></div>
<!– /wp:generateblocks/element –></div>
<!– /wp:generateblocks/element –><!– wp:generateblocks/element {“uniqueId”:”ddc55e72″,”tagName”:”div”,”styles”:{“display”:”flex”,”justifyContent”:”center”},”css”:”.gb-element-ddc55e72{display:flex;justify-content:center}”,”metadata”:{“name”:”Services”}} –>
<div class=”gb-element-ddc55e72″><!– wp:generateblocks/element {“uniqueId”:”e7af91ce”,”tagName”:”div”,”styles”:{“maxWidth”:”var(\u002d\u002dgb-container-width)”},”css”:”.gb-element-e7af91ce{max-width:var(\u002d\u002dgb-container-width)}”} –>
<div class=”gb-element-e7af91ce”><!– wp:generateblocks/query {“uniqueId”:”1ab86064″,”tagName”:”div”,”styles”:{“justifyContent”:”center”,”justifyItems”:”center”},”css”:”.gb-query-1ab86064{justify-content:center;justify-items:center}”,”query”:{“post_type”:[“post”],”posts_per_page”:”6″,”tax_query”:[{“taxonomy”:”category”,”terms”:[“84″],”operator”:”IN”}]},”metadata”:{“name”:”Services Loop”}} –>
<div class=”gb-query-1ab86064″><!– wp:generateblocks/looper {“uniqueId”:”7b223496″,”tagName”:”div”,”styles”:{“display”:”grid”,”gridTemplateColumns”:”repeat(3, minmax(0, 1fr))”,”columnGap”:”20px”,”rowGap”:”20px”,”@media (max-width:767px)”:{“gridTemplateColumns”:”1fr”}},”css”:”.gb-looper-7b223496{column-gap:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px}@media (max-width:767px){.gb-looper-7b223496{grid-template-columns:1fr}}”} –>
<div class=”gb-looper-7b223496″><!– wp:generateblocks/loop-item {“uniqueId”:”c71114fc”,”tagName”:”div”,”styles”:{“backgroundColor”:”#fafafa”,”paddingTop”:”20px”,”paddingRight”:”20px”,”paddingBottom”:”20px”,”paddingLeft”:”20px”},”css”:”.gb-loop-item-c71114fc{background-color:#fafafa;padding:20px}”} –>
<div class=”gb-loop-item gb-loop-item-c71114fc”><!– wp:generateblocks/media {“uniqueId”:”31fb38ca”,”tagName”:”img”,”styles”:{“display”:”block”,”height”:”auto”,”marginBottom”:”30px”,”maxWidth”:”100%”,”@media (max-width:1024px)”:{“transition”:”all 0.5s step-end 0s”,”borderTopWidth”:”1px”,”borderRightWidth”:”1px”,”borderBottomWidth”:”1px”,”borderLeftWidth”:”1px”,”borderTopStyle”:”solid”,”borderRightStyle”:”solid”,”borderBottomStyle”:”solid”,”borderLeftStyle”:”solid”},”borderTopWidth”:”3px”,”borderRightWidth”:”3px”,”borderBottomWidth”:”3px”,”borderLeftWidth”:”3px”,”borderTopStyle”:”solid”,”borderRightStyle”:”solid”,”borderBottomStyle”:”solid”,”borderLeftStyle”:”solid”},”css”:”.gb-media-31fb38ca{border-bottom-style:solid;border-bottom-width:3px;border-left-style:solid;border-left-width:3px;border-right-style:solid;border-right-width:3px;border-top-style:solid;border-top-width:3px;display:block;height:auto;margin-bottom:30px;max-width:100%}@media (max-width:1024px){.gb-media-31fb38ca{border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px;transition:all 0.5s step-end 0s}}”,”htmlAttributes”:{“src”:”{{featured_image key:url}}”,”alt”:”{{post_title}}”}} –>
<!– /wp:generateblocks/media –><!– wp:generateblocks/text {“uniqueId”:”4e5c87cf”,”tagName”:”h2″,”styles”:{“fontSize”:”30px”,”marginBottom”:”5px”,”transform”:”rotate3d(0, 0, 0, 0deg)”},”css”:”.gb-text-4e5c87cf{font-size:30px;margin-bottom:5px;transform:rotate3d(0,0,0,0deg)}”} –>
<h2 class=”gb-text gb-text-4e5c87cf”>{{post_title link:post}}</h2>
<!– /wp:generateblocks/text –><!– wp:generateblocks/text {“uniqueId”:”1b612d37″,”tagName”:”p”,”styles”:{“marginBottom”:”30px”,”fontSize”:”14px”},”css”:”.gb-text-1b612d37{font-size:14px;margin-bottom:30px}”} –>
<p class=”gb-text gb-text-1b612d37″>{{post_date}}</p>
<!– /wp:generateblocks/text –><!– wp:generateblocks/text {“uniqueId”:”3845acf5″,”tagName”:”p”} –>
<p class=”gb-text”>{{post_excerpt}}</p>
<!– /wp:generateblocks/text –></div>
<!– /wp:generateblocks/loop-item –></div>
<!– /wp:generateblocks/looper –></div>
<!– /wp:generateblocks/query –></div>
<!– /wp:generateblocks/element –></div>
<!– /wp:generateblocks/element –> -
Here is a link, it looks like it’s working , but it’s sloppy
-
Here’s an alternative layout you can use:
<!-- wp:generateblocks/element {"uniqueId":"a4ae73e7","tagName":"div","styles":{"backgroundImage":"linear-gradient(90deg, var(\u002d\u002dbase) 50%, var(\u002d\u002dcontrast-3) 50%)","backgroundSize":"cover","backgroundRepeat":"no-repeat","backgroundPosition":"center","backgroundBlendMode":"normal","height":"400px"},"css":".gb-element-a4ae73e7{background-blend-mode:normal;background-image:linear-gradient(90deg,var(\u002d\u002dbase) 50%,var(\u002d\u002dcontrast-3) 50%);background-position:center;background-repeat:no-repeat;background-size:cover;height:400px}"} --> <div class="gb-element-a4ae73e7"><!-- wp:generateblocks/element {"uniqueId":"64b01d6c","tagName":"div","styles":{"maxWidth":"var(\u002d\u002dgb-container-width)","marginLeft":"auto","marginRight":"auto","display":"flex","height":"100%"},"css":".gb-element-64b01d6c{display:flex;height:100%;margin-left:auto;margin-right:auto;max-width:var(\u002d\u002dgb-container-width)}"} --> <div class="gb-element-64b01d6c"><!-- wp:generateblocks/element {"uniqueId":"784c6839","tagName":"div","styles":{"width":"50%","display":"flex","alignItems":"center"},"css":".gb-element-784c6839{align-items:center;display:flex;width:50%}"} --> <div class="gb-element-784c6839"><!-- wp:generateblocks/text {"uniqueId":"fb25c771","tagName":"p","styles":{"fontSize":"48px"},"css":".gb-text-fb25c771{font-size:48px}"} --> <p class="gb-text gb-text-fb25c771"><strong>Left</strong></p> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element --> <!-- wp:generateblocks/element {"uniqueId":"c2d2db8a","tagName":"div","styles":{"width":"50%","display":"flex","alignItems":"center","color":"var(\u002d\u002dbase-3)","justifyContent":"flex-end"},"css":".gb-element-c2d2db8a{align-items:center;color:var(\u002d\u002dbase-3);display:flex;justify-content:flex-end;width:50%}"} --> <div class="gb-element-c2d2db8a"><!-- wp:generateblocks/text {"uniqueId":"5bdf7355","tagName":"p","styles":{"fontSize":"48px"},"css":".gb-text-5bdf7355{font-size:48px}"} --> <p class="gb-text gb-text-5bdf7355"><strong>Right</strong></p> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/element --> -
Thanks
I pasted that text but there doesn’t seem to be any setting in block editor, how did you get the grey background on the columns and this thing settup?
-
It’s a gradient set for the root container:
https://app.screencast.com/HGhyXvYyh0RjZ -
Getting there slowly, but how about having an image as background , not a gradient?
Would like the image to fully cover half the page
That’s what I’m getting now with the new solution:
-
It’s a bit complicated to explain in detail, but here’s what I did:
<!-- wp:generateblocks/element {"uniqueId":"709347f3","tagName":"div","styles":{"backgroundImage":"linear-gradient(90deg, var(\u002d\u002dbase) 50%, var(\u002d\u002dcontrast-3) 50%)","backgroundSize":"cover","backgroundRepeat":"no-repeat","backgroundPosition":"center","backgroundBlendMode":"normal","height":"400px","position":"relative"},"css":".gb-element-709347f3{background-blend-mode:normal;background-image:linear-gradient(90deg,var(\u002d\u002dbase) 50%,var(\u002d\u002dcontrast-3) 50%);background-position:center;background-repeat:no-repeat;background-size:cover;height:400px;position:relative}","metadata":{"name":"Parent Container"}} --> <div class="gb-element-709347f3"><!-- wp:generateblocks/element {"uniqueId":"6c6b5fdc","tagName":"div","styles":{"width":"50%","display":"flex","alignItems":"center","color":"var(\u002d\u002dbase-3)","justifyContent":"flex-end","position":"absolute","top":"0px","left":"0px","right":"0px","bottom":"0px","justifySelf":"end","backgroundImage":"var(\u002d\u002dinline-bg-image)","backgroundSize":"cover","backgroundRepeat":"no-repeat","backgroundPosition":"center","backgroundBlendMode":"normal"},"css":".gb-element-6c6b5fdc{align-items:center;background-blend-mode:normal;background-image:var(\u002d\u002dinline-bg-image);background-position:center;background-repeat:no-repeat;background-size:cover;bottom:0px;color:var(\u002d\u002dbase-3);display:flex;justify-content:flex-end;justify-self:end;left:0px;position:absolute;right:0px;top:0px;width:50%}","htmlAttributes":{"style":"\u002d\u002dinline-bg-image: url(https://sites.generatepress.com/plumber/wp-content/uploads/sites/117/2021/11/pan-xiaozhen-IYE0ImQlY90-unsplash.jpg)"},"metadata":{"name":"Right Image Column"}} --> <div class="gb-element-6c6b5fdc" style="--inline-bg-image: url(https://sites.generatepress.com/plumber/wp-content/uploads/sites/117/2021/11/pan-xiaozhen-IYE0ImQlY90-unsplash.jpg)"></div> <!-- /wp:generateblocks/element --> <!-- wp:generateblocks/element {"uniqueId":"92ca8c72","tagName":"div","styles":{"maxWidth":"var(\u002d\u002dgb-container-width)","marginLeft":"auto","marginRight":"auto","display":"flex","height":"100%","position":"relative"},"css":".gb-element-92ca8c72{display:flex;height:100%;margin-left:auto;margin-right:auto;max-width:var(\u002d\u002dgb-container-width);position:relative}","metadata":{"name":"Inner Contained Columns"}} --> <div class="gb-element-92ca8c72"><!-- wp:generateblocks/element {"uniqueId":"8659e09f","tagName":"div","styles":{"width":"50%","display":"flex","alignItems":"center"},"css":".gb-element-8659e09f{align-items:center;display:flex;width:50%}","metadata":{"name":"Left Column"}} --> <div class="gb-element-8659e09f"><!-- wp:generateblocks/text {"uniqueId":"5bbf2b46","tagName":"p","styles":{"fontSize":"48px"},"css":".gb-text-5bbf2b46{font-size:48px}"} --> <p class="gb-text gb-text-5bbf2b46"><strong>Left</strong></p> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element --> <!-- wp:generateblocks/element {"uniqueId":"4827c57e","tagName":"div","styles":{"width":"50%","display":"flex","alignItems":"center","color":"var(\u002d\u002dbase-3)","justifyContent":"flex-end"},"css":".gb-element-4827c57e{align-items:center;color:var(\u002d\u002dbase-3);display:flex;justify-content:flex-end;width:50%}","metadata":{"name":"Right Column"}} --> <div class="gb-element-4827c57e"><!-- wp:generateblocks/text {"uniqueId":"efa766c1","tagName":"p","styles":{"fontSize":"48px"},"css":".gb-text-efa766c1{font-size:48px}"} --> <p class="gb-text gb-text-efa766c1"><strong>Right</strong></p> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/element -->I’ve set it up for you so you can explore the block settings and see how it’s configured. I also renamed the blocks to help you better understand which block does what.
Let me know if you have any questions as you go through it.
- You must be logged in to reply to this topic.