Hi! I'm trying to solve the same issue on this website:
https://rabbit-bumblebee-dbkd.squarespace.com/
I've tried three ways of doing it:
1. Creating independent blocks, and adding a spacer block below images and text. It works on any desktop, but the blocks get a wrong order on mobile.
2. Creating independent blocks, adding spacers to adjust things to the same level. It works for mobile and my screen resolution, but it changes when resolution is different.
3. Creating a section with stacked image block with buttons. Again, alignment changes when resolution changes.
I believe you got it working, i tried to adapt your solution to my case, but i can't understand 100% that code. I got the section id from chrome's inspector (not sure if i did it right), but i don't know what this part is talking about:
#block-yui_3_17_2_1_1609111147606_196 {
display: none;
Can you give me a hint? Thanks in advance!
By the way, here's what i tried (i injected the code in the page):
@media only screen and (min-width: 767px) {
#page-section-5ff5d73d956b8231734c353b .sqs-row {
display:flex;
max-width: 100% !important
}
#page-section-5ff5d73d956b8231734c353b .sqs-col-4 {
flex: 1
}
#page-section-5ff5d73d956b8231734c353b .sqs-block.button-block.sqs-block-button {
position: absolute;
width: 29%;
bottom: 0vw;
top: 2vm;
}
#block-yui_3_17_2_1_1609111147606_196 {
display: none;
}
}
