How do I make Desktop and Mobile Headers different?

Hi, 

I've spent hours searching and cannot find the answer to what I'd hope was a simple solution!

I basically just want to have a different home page header layout on desktop and mobile view. 

My site is in demo so it's not letting me grab the url.

I've attached a sketch of what I mean - I hope it makes sense!

I want a text box with a coloured background and button on desktop. I've done this and love what it looks like on desktop view.

On mobile I simply just want the text box to move underneath the image and not be on top of it.

If your site is trial/private, you can setup password & share url. We can help easier

On 4/29/2021 at 11:03 PM, tuanphan said:

If your site is trial/private, you can setup password & share url. We can help easier

https://blueberry-hawk-3ztg.squarespace.com/

freofreo is the password

Thank you!

The whole header of the site is a bit out of whack at the moment because I'm trying multiple ways to get around it...

On 5/17/2021 at 1:24 PM, racheluh said:

https://blueberry-hawk-3ztg.squarespace.com/

freofreo is the password

Thank you!

The whole header of the site is a bit out of whack at the moment because I'm trying multiple ways to get around it...

You mean this text/image?

Add to Design > Custom CSS

/* Mobile - Fremantle */
@media screen and (max-width:767px) {
div#block-333ca31eaa5b666935c9 figcaption {
    width: 100%;
    margin-top: 20px;
}
div#block-333ca31eaa5b666935c9 .intrinsic {
    width: 100%;
}
}