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.
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! 😊
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
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?
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.
CSS Grid (My favorite)
Grid it is!
Add a CSS Grid of containers with four columns
Set this CSS Grid fo containers to full width.
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:
It’s the same as the image beside here.
And you should be done.