Rearrange order of Image Card on Mobile

Site URL: https://hyperboloid-ruby-8dbs.squarespace.com/

I have an image card set for my page however I dont like the order of the header and paragraph after the image. I've attached screenshots below. Is there any coding I can implement to rearrange the order of an image card block for mobile?

The first screenshot of desktop is what I have and prefer. The second is of the order I do not prefer in mobile.

The third screenshot is what I would prefer (but would alter the desktop arrangement)

It would also be super cool to center the header just for mobile instead of left aligned. 😕

1 hour ago, vbee said:

Site URL: https://hyperboloid-ruby-8dbs.squarespace.com/

I have an image card set for my page however I dont like the order of the header and paragraph after the image. I've attached screenshots below. Is there any coding I can implement to rearrange the order of an image card block for mobile?

The first screenshot of desktop is what I have and prefer. The second is of the order I do not prefer in mobile.

The third screenshot is what I would prefer (but would alter the desktop arrangement)

It would also be super cool to center the header just for mobile instead of left aligned. 😕

Your site is private now. Kindly set it a site-wide password so I can take a look

Sorry about that. The pw: lasalle1

On 6/10/2022 at 9:28 PM, vbee said:

Sorry about that. The pw: lasalle1

Add to Design > Custom CSS

/* mobile image card */
@media screen and (max-width:767px) {
div#block-8f2ab474a0ff2033973e .image-inset {
    display: none;
}
div#block-8f2ab474a0ff2033973e .image-card .image-subtitle-wrapper:before {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/629a1dd9b0affc4a4cd27525/c848ac0b-70c9-4b7f-9388-b9fc1d98bd29/Remotes.png?format=1500w);
    display: block;
    height: 350px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}}

Its perfect thank you!

Is it possible to adjust the header text to be centered for mobile as well? (reference: "Let us take you there")

18 hours ago, vbee said:

Is it possible to adjust the header text to be centered for mobile as well? (reference: "Let us take you there")

Use new code

/* mobile image card */
@media screen and (max-width:767px) {
div#block-8f2ab474a0ff2033973e {
.image-inset {
    display: none;
}
.image-card .image-subtitle-wrapper:before {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/629a1dd9b0affc4a4cd27525/c848ac0b-70c9-4b7f-9388-b9fc1d98bd29/Remotes.png?format=1500w);
    display: block;
    height: 350px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.image-title-wrapper>* {
    text-align: center !important;
}
}
}