Skip Navigation

Home › Support › English Support › [Resolved] Flatsome block translated; however a gap element is not translated

[Resolved] Flatsome block translated; however a gap element is not translated

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by Waqar Ali 1 year, 5 months ago.

Assisted by: Waqar Ali.

Author Posts
January 20, 2024 at 1:46 pm #15207176

christiand-51

Hi,

I've translated a block from my flatsome theme. A gap element that is used in the original block is not translated. When I switch to the translated language and then edit the block in the UX Themes builder I can see the gap element correctly. However on front I can't see the gap.
I don't understand how this works and can be fixed.
January 22, 2024 at 11:19 am #15210949

Waqar Ali

Hi,

Thank you for contacting us and I'd be happy to assist.

To troubleshoot this, I'll need to see how WPML and this gap element are set up in the admin area.

Can you please share temporary admin login details, along with the exact steps to see the missing gap element?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar
January 25, 2024 at 2:16 pm #15226695

Waqar Ali

Thank you for sharing the access details.

During troubleshooting, I noticed that the gap was not showing because of the missing translation. It was a more general layout or CSS style limitation.

The way the Flatsome theme adds the gap element, it applies the padding to the relevant Div element, but no height.

And because that Div element doesn't have any content in it, it doesn't occupy any height at all.

I have included the following custom CSS code at WP Admin -> Appearance -> Customize -> Additional CSS and it seems to work now in all languages:


.gap-element:after {
    content: ' ';
    color: transparent;
}