Issues with page folding on tablet

[ljakiel]

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.

[anoor35]

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

[Kevin-C · Accepted solution]

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!

[ljakiel]

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!