Custom Gradient on Mobile for Containers

Hi there,

if you select a Grid Item - you can set its own background color make one red and the other item in the grid White.

Grid items are Containers and have most of the styling controls that the Container Block has.

Perfect - thank you, David!

Just one more thing: If you have a look at the top part with 3 case studies, I love how the gradient cuts through the laptop images on desktop & tablet, but on mobile it covers the red 'view case study' text. Is there any way to change the gradient on just mobile to switch colours where I'd like?

Thanks in advance.

Just adding onto this - I've implemented the grids into the page now as you can see and it looks fantastic on mobile. However, the colours don't match up on desktop (there's a space between the two red boxes), if you get what I mean?

If you could let me know how to fix this and make the background colour come to the edge of the grids that would be fantastic.

OK so lets get rid of the column gaps.
Select the Grid Container ( not the grid items ) see here:

https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block

Then set the Horizontal Gap to 0

Currently there is no Responsive controls for gradient backgrounds. So you would need to add some custom CSS to change that.

First select the Container block with the gradient, and in Settings > Advanced > Additional CSS give it a class eg. mobile-gradient

Then add this CSS to remove the gradient on mobile and apply a background color:

@media(max-width: 768px) {
    .gb-container.mobile-gradient {
        background-image: none !important; /* remove gradient */
        background-color: #f00; /* set background color */
    }
}

Perfect. Thank you so much, David!

You're welcome