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
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.
Related
Is there a solution to align .item__header on the baseline with other elements?
I have a situation where title is required but the subtitle is optional and when the subtitle is empty I have an issue with a baseline of the item header?
The solutions that I don't want to consider:
adding min-height
adding fake/empty/mock element
without using scripts like JS/React (unless that's the only solution)
code sandbox
https://codesandbox.io/embed/pedantic-hertz-3mk5sq?fontsize=14&hidenavigation=1&theme=dark
I'm trying to streamline the code for the 'Treatments' section of this website.
The site is responsive, the tiles are floats and reposition themselves with browser size. Clicking on a tile reveals a hidden section below it.
At the moment each tile has around three identical hidden sections positioned in the code, one for each of the three tile positions, to ensure it always appears below the desired tile - i.e. the 'Bunion Deformity' tile's hidden section appears after 'Osteoarthritis' in the widest format, after 'Ingrowing Toenails' in the midsize format and after 'Bunion Deformity' in the smallest format. Javascript is used to select the correct one.
It works but it's a very messy solution. Is there a way I can only paste the hidden section in the HTML code once and have it appear in the desired position regardless of the tile layout? Ideally using CSS alone.
What I wanted to do is that I had multiple tables and/or images of different heights and wanted them positioned on the page side by side, so that the tops of the objects were aligned.
I couldn't figure this out, it didn't matter whether I put these 'in-line' or in separate Boxes (Minipages) (that seemed to be aligned the way I wanted in the editor), in output Lyx always seemed to align these objects somehow around the center of their height and not the top.
Finally, (after several hours of googling and trying to figure this out) I have the answer, so I'm posting it below, because I hope someone like me will find it useful in the future.
The way I solved this is relatively easy.
For each image/table I created a Box (Minipage). In each Box I put, on the first line, Vertical Space (Insert -> Formatting -> Vertical Space) and set the size to 0 in. After the Vertical Space I inserted the graphic/table. This way, if you put several boxes next to each other (for example by setting their width to 25% page width, or whatever you desire), they will be aligned by the top in the output.
You can also do Ctrl+Space (to insert a 'protected space') and then Enter, which seems to work the exact same way.
Hope this helps.
I need to know how do I get the menu where the background depends upon the text entered. As in the image, the background gets expended irrespective of the text in the menu item. Also the sides of the background image should not get distorted.The image is here.
I still tend to use the sliding doors technique for this kind of thing.
http://www.alistapart.com/articles/slidingdoors/
Although there is probably a newer and more elegant solution these days.
If you go to my site: www.ryancoughlin.com - and if you see the Google, Yahoo, etc. RSS buttons on the right side of the page. I am trying to get them to align evenly, they are all the same image height and I have been trying to get them to evenly line up. But I have had no success.
Seems you are missing class="feed-image" on the Yahoo image.
Try to specify them as "inline" instead of block, this should allow you to treat them as words.
Another chance is to make a list (this seems appropriate since the nature of that "list" of images) and let the "li" elements float left (then adjust margins).
Also I think you should change your title in "Aligning images - vertically" to ease future users' search.