Custom Gradient on Mobile for Containers

[Sam]

Hello,

I’ve been creating a new site (URL below) on a temporary domain using GeneratePress, and have been creating sections using gradients, as you can see in the red & white ‘why work with us’ section.

It looks great on desktop & tablet, but the gradient obviously looks dreadful on mobile and cuts through half of the text – is there a more efficient way to create 4 separate blocks of different colours that’ll look good on all devices, or a way to create custom gradients on mobile so I can make it look good on all devices?

Thanks,
Sam

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

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.

[Sam]

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.

[David]

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 */
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

Perfect. Thank you so much, David!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts