Issues with page folding on tablet

SOLVE
ljakiel
Member

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

 

Code added in the design tool.

 

Screen Shot 2021-06-28 at 2.50.11 PM.png

0 Upvotes
1 Accepted solution

Accepted Solutions
Kevin-C
Solution
Recognized Expert

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!

View solution in original post

2 Replies 2
Kevin-C
Solution
Recognized Expert

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!

View solution in original post

ljakiel
Member

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!