Scale 2 Poster Images Blocks together for mobile

Site URL: https://www.map-ebt.org/

https://www.map-ebt.org/

On Home page:

There are two Poster Image Blocks "Already Receiving EBT Benefits?" & "New to EBT?" which I have added and want to appear in a horizontal row, always scaling for all devices in this locked horizontal configuration instead of defaulting to stacking on mobile.

If possible, I would also like to only change the text and button to right alignment on the "Already Receiving EBT Benefits?"

I believe this can only be done with additional custom CSS, my apologies, this is the first time I have used Squarespace, and I haven't found the answer to this yet.

Thank you in advance,

David

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* 2 blocks on row */
div#page-section-5ea1ff0df8f98f58efd415f7>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5ea1ff0df8f98f58efd415f7 * {
    font-size: 15px;
}
}

On 4/25/2020 at 5:55 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* 2 blocks on row */
div#page-section-5ea1ff0df8f98f58efd415f7>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5ea1ff0df8f98f58efd415f7 * {
    font-size: 15px;
}
}

 

Thank you Tuanphan, I appreciate it very much!