Hm, I wanted the images to be responsible, because you cannot read all the text on mobile version
Topic summary
A user encountered an issue where images on their landing page were not displaying responsively on mobile devices, causing text within the images to be cut off and unreadable.
Initial Solutions Proposed:
- Using CSS properties like
max-width: 100%andheight: auto - Changing
object-fitfromcovertocontain - Suggestion to use real text overlays instead of text embedded in images for better responsiveness
Problem Evolution:
The user found that height: auto created unwanted gaps, and object-fit: contain added spacing at the top and bottom of images.
Final Resolution:
A CSS solution was provided targeting the specific tile component (#spro-sp_tiles_WzwWQM) that set minimum height to 0, height to auto, and adjusted image positioning and object-fit properties. This initially affected the desktop version, but the user successfully adapted the code to work across both mobile and desktop views.
Status: Resolved. The user confirmed the solution worked after making adjustments.