Tried the above code and it didn't work as the text alignment was off. but found
the solution to the problem this created below.
https://www.youtube.com/watch?v=1pH2LmLPFus
@media screen and (max-width: 800px) {
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) {
display: block!important;
}
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper {
width: 100%;
margin-left: 0!important;
}
.sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child {
width: 100%;
}
}
Source of code and video ETC
https://schwartz-edmisten.com/blog/force-an-image-card-to-stack-on-tablet-in-squarespace
