Jump to content

How to stack thumbnails on mobile in a list summary? (CSS preferred)

Recommended Posts

I'm trying to fix how the list summary thumbnails appear on mobile. I like how the list appears on desktop and tablet, but need the mobile view to have stacked thumbnails above the title and excerpt.

My current site: https://bitbloggist.com/

I've seen a basic workaround that requires you to manually input the content, but I'd rather the transition happen automatically.

Currently, the thumbnails appear like the image titled "wrong thumbnails."

I'd like the thumbnails to appear like the image titled "preferred mobile view."

Any help would be much appreciated!

wrong-thumbnails.jpg.f4523c947bb99f20e8357c00abc05ff6.jpg

preferred-mobile-view.jpg.15f376d23c4eb04aa72d7c656c9a5a12.jpg

Link to comment
  • Replies 8
  • Views 2.5k
  • Created
  • Last Reply

@BitBloggist Try Adding to Home > Design > Custom CSS


@media screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
   width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
   width: 100% !important;
}
}


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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@BitBloggist


@media screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
   margin-top: 20px;
}
}


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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@BitBloggist You're welcome. I am not sure that the code will be used for many websites, or only for specific websites. Maybe each website will have different CSS

Do you have other issues to help?I'm still free tonight, before facing a ton of deadlines tomorrow.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.

×
×
  • 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.