CODEWITHSUNDEEP
wordpressrevolution-slider
TJ Swing
TJ Swing

Reputation: 13

slider revolution - text elements overlapping

Been using Slider Revolution on WordPress recently for a new client and having one big issue that I cannot find an answer to.

SITUATION - I have 2 text elements, a Title text element and a Description text element (one above the other - vertically stacked) - They have been manually placed to be aligned-left inside the slider area. - I have them with a fixed width so they only cover the left side of the slider panel - I have them set for auto-wrap so words do not get cut off and the test will drop to another line if needed.

PROBLEM With this configuration, if the Title text element is too long (too many words) it will dynamically expand vertically (drop down lines) and cover up or overlap the description text element box below it.

SOLUTION I would like to find a way to "link" or "hook" these 2 elements together (stacked one on top of the other with little space) so they do not overlap and the top element will automatically push down the 2nd text element box. Is it an html issue? a z-index issue? a placement process issue?

In the image I provided, you can see the difference between a 1, 2 & 3 line TITLE, and how the space between them is fixed. HOW DO I GET IT TO BE DYNAMIC? I apologize if this has been answered before, but I have searched for hours and cannot find an answer. Maybe I am searching with the wrong keywords.

slider-revolution-examples

Upvotes: 1

Views: 6219

Answers (1)

Temani Afif
Temani Afif

Reputation: 273990

This is a common situation with Revolution Slider when we use different text elements since they will be different layers and used with position:absolute.

The best solution for this is to merge all the text elements inside one element using basic HTML and style them as needed inside this element. Like this we only have one element used with position:absolute and inside it we have well formed HTML.

Upvotes: 3

Related Questions