AFZ Posted December 19, 2022 Share Posted December 19, 2022 I wanted a full width image card that was 50/50 split with the text on my homepage without overlap. I managed that, but it completely broke my mobile view by making the card bubble a narrow strip. In mobile view, I want a full width picture on top, and the card text below the picture and not overlapping like the default. This is the code I have so far: // Image Card Full Width // section[data-section-id="63a0b33ac03b662d662d002d"]{ overflow-x: hidden !important; overflow-y: hidden !important; .content-wrapper { padding: auto !important; margin: 0px auto; display: contents; } .sqs-layout .sqs-row .sqs-block { padding-bottom: 0px !important; padding-top: 0px !important; }} .sqs-block-image-figure { .image-inset { height: 100% !important; width: 90% !important; } .sqs-image-shape-container-element { height: 100% !important; } .intrinsic { width: 60% !important; } .image-card-wrapper { width: 36% !important } } @media screen and (max-width:767px) { .image-block.sqs-block-image .design-layout-card { display: flex !important; -ms-justify-content: space-between !important; justify-content: space-between !important; } .sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic { width: 125% !important; } figcaption.image-card-wrapper { margin-top: 15px !important; padding-left: 55% !important; padding-right: 55% !important; } [data-section-id="63a0b33ac03b662d662d002d"] .image-block figure { max-width: 100% !important; } } I'd really appreciate help! Thank you in advance! Link to comment
tuanphan Posted December 21, 2022 Share Posted December 21, 2022 Hi, What is page url? 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
AFZ Posted December 21, 2022 Author Share Posted December 21, 2022 11 hours ago, tuanphan said: Hi, What is page url? Sorry, I thought the URL was listed! It's www.ariellazoelle.com Link to comment
Solution tuanphan Posted December 24, 2022 Solution Share Posted December 24, 2022 On 12/22/2022 at 4:07 AM, AFZ said: Sorry, I thought the URL was listed! It's www.ariellazoelle.com Add this to bottom of CSS Box @media screen and (max-width:767px) { .sqs-block-image-figure .image-card-wrapper { width: 95% !important; padding: 10px !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
AFZ Posted December 24, 2022 Author Share Posted December 24, 2022 18 hours ago, tuanphan said: Add this to bottom of CSS Box @media screen and (max-width:767px) { .sqs-block-image-figure .image-card-wrapper { width: 95% !important; padding: 10px !important; } } Thank you, that worked perfectly! I appreciate your help, as always, @tuanphan ❤️ Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment