Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
PGH

Wrong text reformatting for tablet on Brine

Recommended Posts

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

1466448572_Screenshot2020-02-13at9_37_24AM.thumb.png.b13b7f25b28e4fbe219be9d2dba69584.png

 

tablet view


474643828_Screenshot2020-02-13at9_37_14AM.thumb.png.5e989ff8c4e834cad9e41a7b5a06c96d.png

 

Share this post


Link to post

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;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post

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.

Share this post


Link to post
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post

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;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...