My website has a layout with three columns: col-auto on the left, col in the middle, and col-auto on the right.
The col-auto columns display skyscraper ads (600x160) while the col column contains text. However, when the text inside the col column is wide, it causes alignment issues where the left column overlaps the card and the right column moves below it.
When the text is not wide, I can shrink them using d-none d-md-block classes and everything looks fine, as the columns remain properly aligned in their designated spots.
Although setting overflow to auto helps somewhat, I am still facing the issue of columns stacking incorrectly. Shouldn't the "col" class prevent this kind of stacking behavior?
I want the columns to always stay beside each other regardless of the width of text inside the card,
If anyone has any suggestions or solutions, please share them!