Jump to content

Wrong text reformatting for tablet on Brine

Recommended Posts

Posted

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

 

  • Replies 5
  • Views 1k
  • Created
  • Last Reply
Posted

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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.

Posted
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.