OTW Portfolio page does not display properly on iPad

[michelefree]

Hi.

I am working on finishing a website, and have a problem on my portfolio page.

I have set it to the full page layout. It looks great on laptops and larger computers, and phones, but when I look at it on the iPad, there are not 3 portfolio items on each line. At first it has them all in order--4 lines of 3 on each line, then it pops into a different configuration each time.

It varies. One line will have 3, one line 2 and one line 1, then 3 again.
http://wordpress.frontrangecommercial.net/wp-content/uploads/2015/09/IMG_1264.png
http://wordpress.frontrangecommercial.net/wp-content/uploads/2015/09/IMG_1263.png

I'm thinking that I need to make the inner page have a smaller width for iPad, but am unsure how to do this. I tried different sizes on the @media up to 630px, and nothing happened.

Also, sometimes the front, secondary menu under the slider looks fine, then sometimes it sends the fourth menu item to the next line.
http://wordpress.frontrangecommercial.net/wp-content/uploads/2015/09/IMG_1265.png

The iPad display seems to change at will. X)

Any ideas?

PS the site also loads EXTREMELY slowly on iPad

http://wordpress.frontrangecommercial.net

[Ginger]

Hi Michele,

Did you get this sorted? When I view the site, the featured properties shows 3 across on the iPad in both tall and wide view:

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[michelefree]

It seems to have resolved itself. I checked it on a responsive screen simulator, http://responsivedesignchecker.com/, and everything looked good.

I think it is my first generation iPad that is having trouble.

However, when I checked wordpress.frontrangecommercial.net on the 27-inch screen using responsivedesignchecker.com, the site looks awful. The slider is wedged against the left side, and the content of the site is spread out way too far.

Any suggestions there? Do I need to add an @media for 2560-width screens inside a wrapper?

Appreciate your help. Cheers!

[Ginger]

Oh my goodness, a 1st gen iPad, yes, that would explain your performance issues. Those have been defunct for quite some time....iPad 2's are also done. I would use the built-in devices in your browser since then you can troubleshoot with Inspect Element. Chrome and Firefox do a nice job of emulating all the tablet and phones for testing.

You don't want to set a media size that large.

The reason the site appears like that is because the site container width values have all been changed to 100%. And your media query width values have been changed. In your style.css file the changes were commented with /* EDIT which is nice, it makes it easier to find. Normally you would not want a site to go the full width of a screen size that wide. If in doubt, have a look at the demo site of the theme you are using -- in your case it is Executive Pro. Any of the StudioPress themes when viewed on a screen that wide will just show in the middle, centered since their default site widths are usually 1200px, and the content is usually around 800px.

Hope this helps!

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[michelefree]

Thank you for your support. It really helped me to understand some things. Cheers!

[Author]

Posts