BitBloggist Posted July 16, 2019 Share Posted July 16, 2019 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! Link to comment
tuanphan Posted July 16, 2019 Share Posted July 16, 2019 Can you share site url? It is difficult to help without site url 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
BitBloggist Posted July 16, 2019 Author Share Posted July 16, 2019 Added site URL to question! Thank @tuanphan Link to comment
tuanphan Posted July 16, 2019 Share Posted July 16, 2019 @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 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 Posted July 16, 2019 Author Share Posted July 16, 2019 @tuanphan Oh dang! This is almost perfect. I just need to add some padding below the thumbnail and we're golden! Link to comment
tuanphan Posted July 16, 2019 Share Posted July 16, 2019 @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 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 Posted July 16, 2019 Author Share Posted July 16, 2019 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? Link to comment
BitBloggist Posted July 16, 2019 Author Share Posted July 16, 2019 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? Link to comment
tuanphan Posted July 16, 2019 Share Posted July 16, 2019 @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 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.