WordPress Pro secrets to two-column designs, Method 4 is my favorite.

lexvd

Scroll down
In web design, you can easily create designs in which one part of the content stretches to the edge, and the other part is in line with the content. Now, in Figma, this is easy to do. However, in creating the website itself, it becomes a challenge.

Several solutions to the problem can be considered, some more complex than others. To solve the problem of creating a full-width layout in web design, you can utilize negative margins, image background, absolute positioning, and the techniques shared in the video.
Not sponsor spot
I want to thank my not sponsor, Greenshift. They offer a fantastic free plugin and paid options to extend the awesomeness you can create within WordPress, from a fantastic animation pack to ready-made and SEO-optimized affiliate marketing blocks. Look for the best bundle at GreenShift. Trust me, you won’t regret it!
tchs.li

Greenshift Shop – Extend your site with premium Gutenberg WordPress addons

This post has affiliate links (like the one above). If you buy something, I get a teensy-tiny-bit of gadget money. This helps me run this site and create more awesome content. But don’t worry, I only recommend what I use and trust. Thanks for your support! 😊

Background Image

One of the first solutions I can think of is using the image as a background. This will make your image stretch to the edge. You’ll need to play around with background-position and size to get it to look correctly, but it isn’t a big deal. Just set your background image on your row block. And there you go!

However, the image is a background, so some SEO optimizations are lost. Secondly, the background is as big as the contents of the text section. This means it won’t show the full image when there isn’t a lot of text.

To little text

Background noise

In a world of colors so bright and bold, where the stories of shapes and shades are told. A backdrop so whimsical, with hues of delight, it’s a background image that fills your sight, both day and night.

Negative Margin

For negative margins, you can adjust the margin of a particular element to extend beyond its container. This would allow a portion of your content to reach the edge of the screen while the rest remains within the confines of the layout. But this means you have to know how far the edge of the screen is, which is a bit of a pickle when dealing with responsive web design, especially when you don’t use a fixed margin across the edges. (below it has margin-right -1vw, it works on my machine….)

Margin of error?

In the land where web designs begin, a negative margin is quite the sin. It pushes your layout far and thin, causing chaos and quite the din.

Position Absolute

With absolute positioning, you can ignore the normal flow of elements and position an element exactly where you want it, even extending it to the edge of the screen by setting the right value to 0. The problem with this is that your image is now ‘floating’ inside the row block, which means the row will ignore the height of the image. To fix this you’ll need to either set the height of the main row or add some margin below the section to make up for some lost space.

Absolutely not!

In the world of coding, there’s a thing quite resolute, a magical feature called position absolute. It sets an element free, you see, to float anywhere, from the top to the deepest sea.
This text is a new container below the one above, but you won’t see everything because the image is flowing over the height of the row, which ignores the image’s height. This makes for these kinds of weird things happening with text on top of it.

CSS Grid (My favorite)

I believe the best way is by using the solution from Kevin Powell, a CSS grid, or in Greenshift terms, a CSS grid of containers with four columns and some (not too difficult) CSS magic. And because of the way Greenshift has implemented CSS Grid, it’s actually very easy to work with.
www.youtube.com

YouTube

Grid it is!

In the land where web designs meet, CSS Grid stands tall, so neat. It solves the puzzle, makes layouts sweet, with rows and columns, it’s hard to beat.

Step-by-step

Add a CSS Grid of containers with four columns

Set this CSS Grid fo containers to full width.

Change the grid to using this button, found on the left-hand side

Stretch the block to the side which you would like to stretch to the edge. It’s fine that that one container will flow to the next line. You’re going to remove that container next.

Click the CSS grid of containers and set Flexible Content Options > Custom Template to:

auto / 1fr calc(var(–wp–style–global–content-size) / 2) calc(var(–wp–style–global–content-size) / 2) 1fr

It’s the same as the image beside here.

And you should be done.

lexvd