Currently, I am facing a challenge in aligning text to various images for a presentation slider. The issue arises due to the varying number of items and the need for text in both English and Spanish languages to be accommodated regardless of length (usually up to 25 characters). While it works well for two or three items, I require a more dynamic solution as the text length can vary significantly. This current setup is purely experimental.
The images are relatively large, so I have resized them to 800px to ensure they fit perfectly within my template. However, I am unsure whether I should adjust the images themselves or attempt to modify the text content to achieve better alignment.
https://i.sstatic.net/dUo4R.png
This is my progress thus far: I have attempted to allocate row size across columns using percentages and pixels. For instance, if there are two items, each column's width should ideally be set at 50%. Unfortunately, this approach has not yielded satisfactory results, prompting me to experiment with different values (e.g., setting it at 42% for two items) without success.
// CSS code block goes here <html snippet code goes here>