[Support request] How to make half and half gradient responsive.

[Syed]

Hello there,

Hope you are well.

I have a full-width background container with the following CSS applied as background to break the background container into two separate parts.

.hero1 {
background: linear-gradient(
to right,

#FF90E8 55%,
#FFC900 45%
);
height: 100%;
width: 100%;
}

However, the issue is that this CSS is not responsive on mobile.

I was wondering if there is a way to make this CSS responsive on mobile so that this gradient goes from top to bottom on mobile devices. Just as two containers in a grid stack on top of each other on mobile devices?

Your help in this regard will be much appreciated.

Kind regards,

[Fernando]

Hi Syed,

What Container are you using? Is it GenerateBlocks?

For reference, can you provide the link to where we can see this specific page on your site?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Syed]

Hi Fernando,

Thanks for the reply.

This is the GenerateBlocks container. Please see the hero section.

Please see attached URL. As you may notice that gradient looks fine on a Desktop but horrible on mobile.

Thanks for your help in advance.

Kind regards,

[David]

Hi there,

you would need to use a separate CSS rule fro mobile eg>

@media(max-width: 768px) {
    .hero1 {
        background: linear-gradient(to bottom,#FF90E8 55%,#FFC900 45%);
    }
}

Or if you have GB Pro you can do it with an Advanced Background.

[Author]

Posts