Jump to content

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

 

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.