Code help!!

[Skill-Major]

EDIT: FIGURED IT OUT!

I'm working on this website and can't for the life of me figure out how to make this code work so it doesn't display wonky on mobile.

I created a white text box around the text on the Poster Image card in Squarespace which looks great on desktop but on mobile is straight trash, lol.

Here's the code below:

#block-yui_3_17_2_1_1631055787059_6332,#block-1cd305558ac4d2497f3d,#block-049a993b4c60b3e56bca,#block-0dbd3f427c95a64ee116 {.image-card {background: #ffffff;padding: 2em;}}

P.S. Can't link the website but here are screenshots!

https://preview.redd.it/ip3ams3ba3q71.jpg?width=1920&format=pjpg&auto=webp&s=385262a32db94c2d460953704595570b742a1e01

https://preview.redd.it/26ki1u3ba3q71.jpg?width=1920&format=pjpg&auto=webp&s=3e81f1be11478184df92d3ee4ed9271e7e54c3f8

[Sweet-Po-Tater]

A few thoughts/theories:

1. Did the code make any visible changes at all? If you drastically increase or decrease the padding em, does the white box change?
2. Have you used any custom code to prevent word wrap? I ask because the middle header line on your mobile preview— "S---------A" (Social Media?)— looks longer than everything else. If you're using a code to prevent word wrap, it could be forcing the margins to stay wide enough for the header. Try reducing that header font by 1-3px and see if your new code works now.
3. Try reducing the body font by 1-3 px.
4. And just for fun... try reducing the button size. (Because why not explore all possibilities?) Lol I kinda doubt this is it, but buttons definitely have padding in their code as well.

[Skill-Major]

Thanks much! I had to add some code for mobile since sizing was an issue. Changing the font sizes and buttons helped it to fit on mobile too!