Tables added via code blocks or markdown in Squarespace 7.1 can overflow on mobile screens. Wrapping the table in a scrollable container or using overflow-x: auto on the block itself fixes this.
Target the .sqs-block-code wrapper and add horizontal scroll behavior. Style the table cells with min-width values to prevent text from getting crushed on smaller screens.
.sqs-block-code {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sqs-block-code table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}
.sqs-block-code th,
.sqs-block-code td {
padding: 12px 16px;
border: 1px solid #e0e0e0;
text-align: left;
white-space: nowrap;
}
.sqs-block-code th {
background: #f5f5f5;
font-weight: 600;
}Find more snippets in our CSS CheatsheetTry it free →
