How to use media queries to make my image banner responsive?

Hi, I’m struggling with my image banner. I tried to make it responsive so it displays neat on all screens. I added two separate images, one for mobile, one for desktop. When I try on my iphone, it looks OK, when on my macbook 13 it looks ok. But when i try to make the screen smaller on laptop, it doesn’t look nice. it seems that the image is responsive, but the text and button are not. They are all over the place. Please help. www.myloandmasboutique.com

Hi - if you’re a merchant looking for help with a theme customisation, I’d recommend asking on the merchant forums > Design board here: https://community.shopify.com/c/shopify-design/bd-p/ecommerce-design

Hey! Sounds like you’re almost there. The reason the image looks fine but the text and button go out of place is probably because they aren’t adjusting properly when the screen size changes. This usually happens if they’re set with fixed positions or sizes.

To fix it, you’ll want to make sure the text and button are styled to move and resize with the screen—using things like flexible layout settings and media queries. That way, everything stays in place whether someone’s on a phone, laptop, or resizing the window.

If you’d like, I can help fix it up so the whole banner looks great on all screen sizes!

Thank you so much. I tried to change px to rem, but it did not help. Yes please, could you please help me solve this?