How to change when responsive site switches styles for devices?

Support
#1

Hello,
Our website works well on iPhone and on multiple window sizes on PC, but on an iPad the sections are very broken up. The site is trying to stay in the computer pixel width and its causing things to look way off… If we could force the ipad to go ahead and view like its an iPhone, it would look much better. Where can we edit our theme file to make this happen?

#2

Hi There,

Please add the my-content-band class to your contend bands, after that adding this custom CSS under Theme Options > CSS:

@media (max-width: 767px){
    .my-content-band .x-column.x-1-2 {
      width: 100% !important;
      display: block !important;
    }
}

Hope it helps :slight_smile:

#3

Thanks @thai, however that didn’t seem to change anything… i’m still seeing the content side by side on the iPad and the photo isn’t stacking on top of the text like it does on the iPhone… Any other suggestions?

#4

Hi There,

Please change the custom CSS to this:

@media (max-width: 768px){
    .my-content-band .x-column.x-1-2 {
      width: 100% !important;
      display: block !important;
    }
}

Let us know how it goes!

#5

@thai still not working unfortunately. Any other ideas or suggestions?

#6

Hello There,

Please have your code updated and use this:

@media (max-width: 979px){
    .my-content-band .x-column.x-1-2 {
      width: 100% !important;
      display: block !important;
    }
}

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

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.