Mobile responsive problems – iPad Landscape

[lisa.burgess]

Hello,

I am having problems styling the mobile responsive section of the Minimum 2 theme.

When I view my site on iPad Landscape, the right portion of the page is cut off. It cannot even be scrolled to. I have tried adjusting the mobile responsive CSS so many different ways, but cannot seem to find a solution.

I have used the studiopress responsive site checker, along with my iPad and cant seem to find out where my CSS blunder is.

I notice that on smaller viewport sizes, my #page-title and #footer-widgets are also too wide (but scrollable).

But my main concern is why the right side of the site gets cut off in landscape view. Any help is greatly appreciated.

URL: http://coresmart.com/wp/

Thanks,

Lisa

[Jen Baumann]

You need to override the 1140 width on #page-title and #footer-widgets in the responsive section. Those are the 2 causing the issue.

[Annaedv]

Hello. I´m having the same problem in Mocha Theme. It seems to work in my HTC but not in Iphone4. The page/text can´t be readable to the right.

Do I need to change the same thing? I´m not so good at coding. Where do I do this? Can you describe a little bit more, what och where to do this?

[lisa.burgess]

Hello Jen,

Under the responsive CSS (1200px), I have this:

#header,
#slider,
#main,
#footer-widgets,
#footer,
#page-title,
#page-title .wrap{
max-width: 960px;
margin: 0 auto;}

But, still the right side of everything from the header nav, home-featured, footer-widgets, footer are all cut off on the right on iPad Landscape.

Any ideas?

thanks,

Lisa

[Jen Baumann]

Annaedv, If you could open your own thread, that would be great, it is going to be a different issue.

You need to trump it with width: 100% instead of the max-width.

[lisa.burgess]

I have tried this and it fixes the display issues for iPad portrait, but still the landscape view is chopped off on the right. Any other ideas as to why this is happening?

Thanks so much for all of your help!

LIsa

[Jen Baumann]

You still have some 1140px widths you need to deal with:

.wrap {
  margin: 0 auto;
  width: 1140px;
}

#footer-widgets .wrap {
  background-color: #FFFFFF;
  margin: 0 auto;
  overflow: hidden;
  padding: 40px 0 0;
  width: 1140px;
}

[lisa.burgess]

Oh my gosh! Thank you Jen!

That did it!  I *will* get the hang of updating the responsive CSS!  I truly appreciate your help on this. No more right side of page cut off.

Lisa

[Jen Baumann]

You're welcome! You will get the hang of it :0) Takes practice!

[Author]

Posts