Docs

[K]

Hi,

I read the forum and tried to find the solution. I got a css code from one of the threads that went a little something like this:

@media only screen and (max-width: 768px) {
.x-column.x-sm {
float: none;
margin: 0;
width: 100% !important;
}
}

That should have made the ipad portrait view force the columns into x-sm mobile right(?), and it did so on some of the pages. But other pages on my site still got the 2 column squashed split on the portrait view. How can I solve this? I just want the iPad portrait to use mobile layout, which saves me a ton of time considering I am going to make more manual copies of the pages for translation and then I wont have to make that step the manual way with visibility configuration in CS. That would duplicate content which would have to be taken into account with changes in any language on every page.

[K]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! Your code is already taking effect.

Please clear your iPad’s browser cache.

Thanks.

[K]

Yes it works on some and on some it doesnt work. Like the contact and booking page for example. The booking page form is hard to read and use. I tried emptying the browser cache.

K

[Rue Nel]

Hello There,

Thanks for updating in! it doesn’t apply to Contact and Booking page because they are not of the same structure. The row settings is using marginless columns. Please have your code updated and make use of this code:

@media only screen and (max-width: 768px) { 
  .x-section .x-container .x-column.x-sm,
  .x-section .x-container.marginless-columns .x-column.x-sm { 
    display: block;
    float: none; 
    margin: 0; 
    width: 100% !important; 
  } 
}

We would loved to know if this has work for you. Thank you.

[K]

Seems to be working perfectly! Thank you so much!

K

[Paul R]

You’re welcome! 🙂

[Author]

Posts