Jump to content

Rearrange order of Image Card on Mobile

Recommended Posts

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. 😕

Screen Shot 2022-06-09 at 4.49.26 PM.png

Screen Shot 2022-06-09 at 4.49.43 PM.png

Screen Shot 2022-06-09 at 4.50.09 PM.png

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

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. 😕

Screen Shot 2022-06-09 at 4.49.26 PM.png

Screen Shot 2022-06-09 at 4.49.43 PM.png

Screen Shot 2022-06-09 at 4.50.09 PM.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.