[Resolved] Dividers cause Issues mobile

[Katrin]

Hey there,

I’m using dividers of gutenberg to build a tabel style on my site. Problem is, on mobile the deviders arn’t as wide as the rest of the content and the site gets scrollable to the sides. Is there a way to make the deviders shorter or as wide as the rest of the content?

Also as you see I was using a gradiant in the background which looks good on desktop, but not on mobile. Is there a way to use the gradiant of the generateblock only on desktop?

Thanks or all your help you’re providing!

Best, Kat

[David]

Hi there,

add this CSS to stop the divider from being wider then its container:

hr.tab {
    max-width: 100%;
}

Regarding the Gradient – are you using GenerateBlocks Pro ?

[Katrin]

Hey,

works perfect, thanks!

What about the gradiant that I want to use on desktop to underline the pictures. I there a way to deactivate that on mobile?

Best, Kat

[Fernando]

Hi Katrin,

Yes, there’s a way. In GenerateBlocks Pro, there’s an Advanced Backgrounds feature which allows you to add Gradients only for a specific view.

Reference: https://docs.generateblocks.com/article/advanced-backgrounds/

Otherwise, you’ll need custom CSS.

[Katrin]

Works perfectly with GB pro, thanks!

[Fernando]

You’re welcome Katrin!

[Author]

Posts