Squarespace 7.1's section columns can be forced into a clean 50/50 split using flexbox. Target the .content-wrapper inside your section to create a side-by-side layout that stacks on mobile.
Make sure the image side uses object-fit: cover so the image fills its half completely regardless of aspect ratio, creating a polished edge-to-edge look.
[data-section-id="YOUR_SECTION_ID"] .content-wrapper {
display: flex;
align-items: stretch;
max-width: 100% !important;
padding: 0 !important;
}
[data-section-id="YOUR_SECTION_ID"] .content-wrapper > .fe-block:first-child {
flex: 1;
}
[data-section-id="YOUR_SECTION_ID"] .content-wrapper > .fe-block:first-child img {
width: 100%;
height: 100%;
object-fit: cover;
}
[data-section-id="YOUR_SECTION_ID"] .content-wrapper > .fe-block:last-child {
flex: 1;
display: flex;
align-items: center;
padding: 60px;
}Generate this with our Section BuilderTry it free →
