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

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


Go to solution Solved by tuanphan,

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

Edited by BitBloggist
Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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

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
  • Solution

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

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

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

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
Guest
This topic is now closed to further replies.

×
×
  • Create New...