Archived topic

How to make half and half gradient responsive.

3 replies · Started by Syed on November 14, 2022

Viewing posts 1–4 of 4

November 14, 2022 at 5:56 pm #2415740

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,

November 14, 2022 at 6:31 pm #2415757

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

November 15, 2022 at 4:22 am #2416192

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,

November 15, 2022 at 5:13 am #2416248

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.

This archived topic is closed to new replies.

Start building better websites today.