MelissaVern Posted June 5, 2021 Share Posted June 5, 2021 Site URL: https://oboe-orb-t2t6.squarespace.com/ Hello! Been searching this forum for awhile and cannot fix this problem. What is CSS code for moving image to the top so the text can span full-width on mobile/tablets only? This is a overlap image block card with other CSS styling already applied. PW: peanut (I am using 7.1 trial so hopefully this works since I cannot publish until I upgrade) Using this so far: @media screen and (max-width:800px) {[data-section-id="60a3d67d070c213253baad5f"] .sqs-block-image .design-layout-overlap {display: block; width: 100%;} } Also, trying to make the boxes equal height on desktop Link to comment
tuanphan Posted June 8, 2021 Share Posted June 8, 2021 Hi, Q1. Add to Design > custom CSS /* Mobile-Thrive Boxes */ @media screen and (max-width:767px) { div#page-section-60a3d67d070c213253baad5f figure { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; padding: 20px !important; } } Q2. It looks like you solved this? 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
MelissaVern Posted June 13, 2021 Author Share Posted June 13, 2021 @tuanphan Thank you! that worked for the mobile cards - I just added some extra CSS to the .image-inset to prevent overlap. I think I solved it too but my client said on her screen she was seeing it as uneven. I'll have to clarify if she was just in the "working screen" not the actual viewing of the page. It always looks different there which is frustrating. Your solutions have helped me so much with building this site as I've never used CSS in big ways before, thank you for being such a resource. Link to comment
tuanphan Posted June 14, 2021 Share Posted June 14, 2021 You can check some screensize, if still have problem, let me know. We will support. 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.