Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

RTL GenerateBlock Error

  • Hi,

    The background seems to show on the wrong end on rtl site.

    Please check video –

    For the Arabic site the background needs to be behind the image.


  • Hi there,

    hmmm…. tricky one as the background is a linear gradient and thats pure CSS so it will not respond to RTL.
    You could try this:

    1. Select the Container Block that has the Gradient Attached to it:
    1.1 set the gradients SELECTOR to Pseudo Element.
    1.2 In Advanced > Additional CSS Classes add: has-gradient

    Save that

    2. In your CSS add this:

    [dir='rtl'] .gb-container.has-gradient:after {
      transform: scaleX(-100%);

    What that should do is flip the pseudo element on a RTL site.

    But you will have to do that for every container that has the gradient.

  • Hi,

    Is there an easier way to do this, I am not so good with coding.

  • There isn’t unfortunately.
    The only code required is part 2. Which you can copy and paste into the Customizer > Additional CSS at the very top.

  • Thank you. I followed the steps, it almost fixes the issue. The styling of image is still not right on RTL. There needs to be an empty space before the image.!AuXcuhKseNVhk_g6upsEyITzGdZ2Gw?e=4MwuX0

  • OK, the only way to resolve that would be to change the design so that Container Block has equal Left and Right Padding….

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.