Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
BitBloggist

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

Recommended Posts

Posted (edited)

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

Edited by BitBloggist

Share this post


Link to post

@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;
}
}


Share this post


Link to post
Posted (edited)

@tuanphan Oh dang! This is almost perfect. I just need to add some padding below the thumbnail and we're golden!

Edited by BitBloggist
Initial Revision

Share this post


Link to post

@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;
}
}


Share this post


Link to post

That did it! Wow!

I can't thank you enough @tuanphan!

Virtual hug sent your way.

Would you like me to direct other users to this solution?

Share this post


Link to post

That did it! Wow!

I can't thank you enough @tuanphan!

Virtual hug sent your way.

Would you like me to direct other users to this solution?

Share this post


Link to post

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

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...