[Resolved] Custom Gradient on Mobile for Containers

Home Forums Support Custom Gradient on Mobile for Containers

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1441240
    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

    #1441246
    David
    Staff
    Customer Support

    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.

    #1441288
    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.

    #1441305
    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.

    #1441334
    David
    Staff
    Customer Support

    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 */
        }
    }
    #1441380
    Sam

    Perfect. Thank you so much, David!

    #1442042
    David
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.