How to make elements move with screen size change?

[lilyandtwitch]

I have some parts of my website that are fine on desktop but don’t move properly when the screen size changes. Can anyone tell me how to fix this?

https://elillustrations.com/

[DitalTek]

hi @lilyandtwitch

Which parts you are want change? If It’s hero banner you can change with css like this

@media screen and (max-width: 767px){
  #shopify-section-template--20323948265756__image_banner .banner__box.content-container {
    padding: 20px;
  }
}

And this is result:

[lilyandtwitch]

It’s causing the text to wrap instead of shrinking with the banner.

I want it to stay on a single line

[Dan-From-Ryviu]

Please change CSS code like this to solve the issue with your banner

@media screen and (max-width: 767px){
  #shopify-section-template--20323948265756__image_banner .banner__box.content-container {
    padding: 90px 30px;
  }
}

[lilyandtwitch]

Thanks! It worked!

[Dan-From-Ryviu]

Happy I could help