topic Re: Issues with page folding on tablet in CMS Development

Issues with page folding on tablet

ljakiel — Mon, 28 Jun 2021 22:05:43 GMT

We're having issues with the way our content folds when previewed on a tablet. In the design tools we've added the code in the image below to the lp-section 3 module but it doesn't make any changes to the preview. When we add it to the div class=row-fluid above while inspecting the code, we can get the page to fold how we want (with everything falling into a single centered column).

Not sure what we can do to get the page to respond how we were hoping.

Here is the link to our template to view the page folding:

https://go.unearthlabs.com/-temporary-slug-441949fc-d3e7-40bd-a6a6-6e30843eee6c?hs_preview=PkiVndfu-49578768156

Code added in the design tool.

Re: Issues with page folding on tablet

Kevin-C — Tue, 29 Jun 2021 12:17:38 GMT

Hey @ljakiel

You might want to target the @media(min-width:768px) and (max-width:1139px) media query from you template. see below:

@media(min-width:768px) and (max-width:1139px) { .row-fluid .span4 { width: 99.999999993%; margin:0; padding: 0 1rem; } .row-fluid .span6 { width: 99.999999993%; padding: 0 1rem; margin:0; } .row-fluid .span7 { width: 99.999999993%; padding: 0 1rem; margin:0; } }

You will want to do a good amount of testing a finessing before publishing. If you've got any more questions or I haven't answered yours please don't hesitate ot post again!

Re: Issues with page folding on tablet

ljakiel — Tue, 29 Jun 2021 17:45:05 GMT

Thank you Kevin, this worked great with just a little adjustment to the width percentage and some padding so our form didn't get cut off!

Re: Issues with page folding on tablet

anoor35 — Wed, 23 Aug 2023 14:51:06 GMT

Thank you Kevin, I'm facing the same issue on my side but now it's solved.