I see, generally it’s not a good idea to do that because it causes unexpected behaviours. Let me look into it and give you a solution.
Topic summary
A user seeks CSS help to eliminate left and right gaps around a GIF banner image on mobile without changing the image size.
Initial Issue:
- Negative margin values were causing unexpected layout behavior
- Gaps appeared on both sides of the banner image
Solutions Attempted:
- First CSS fix removed negative margins and set minimum height, but pushed the GIF downward instead of filling horizontal gaps
- Second CSS solution applied transformations (50% translate, 50% left position, 60% max-width) with black background color
Current Status:
- The discussion appears ongoing
- The helper indicated the second solution represents the limit of what CSS alone can achieve
- User’s goal remains to maintain the GIF at its current height while filling the horizontal gaps to match the main banner width
1 Like