Wrong text reformatting for tablet on Brine

Site URL: https://commonfarms.com/edible-plants-of-hk-vol-1

I wanted to create three columns of text side by side, so I used three content blocks. On desktop the columns look fine, and they are reshuffled correctly on top of each other on mobile. However, on tablet view the columns do not preserve the right look of the text and squeeze each other to one side. Would appreciate any advice on fixing this issue.

desktop view

tablet view

I think  1 block/row is fine. Add to Home > Design > Custom CSS to do this

@media screen and (max-width:900px) {
div#block-7bd18426b72a96863da6+.row>.col {
    width: 100% !important;
}
div#block-7bd18426b72a96863da6+.row>.col .sqs-block-html {
    padding-bottom: 0;
    padding-top: 0;
}
}

Hi, thank you that helped fix the tablet view. There is another section further down the page with a similar problem, but it didn't fix that section and I'm not sure how to edit the code to include it. Thanks very much for your help.

29 minutes ago, PGH said:

Hi, thank you that helped fix the tablet view. There is another section further down the page with a similar problem, but it didn't fix that section and I'm not sure how to edit the code to include it. Thanks very much for your help.

Which section?

All code

@media screen and (min-width: 641px) and (max-width: 900px) {
    div#block-7bd18426b72a96863da6+.row>.col {
        width:100% !important
    }

    div#block-7bd18426b72a96863da6+.row>.col .sqs-block-html {
        padding-bottom: 0;
        padding-top: 0
    }
    div#block-e81ffae3a60b378b97aa+.row>div:not(:first-child):not(:last-child) {
    width: 50%;
}
div#block-e81ffae3a60b378b97aa+.row>div:first-child, div#block-e81ffae3a60b378b97aa+.row>div:last-child {
    display: none;
}
div#block-yui_3_17_2_1_1581498182642_179327+.row>.span-1 {
    display: none;
}
div#block-yui_3_17_2_1_1581498182642_179327+.row>.span-2 {
    width: 33.33% !important;
}
}