Community Forums › Forums › Archived Forums › Design Tips and Tricks › OTW Portfolio page does not display properly on iPad
- This topic has 4 replies, 2 voices, and was last updated 8 years, 7 months ago by michelefree.
-
AuthorPosts
-
September 10, 2015 at 1:52 pm #165154michelefreeMember
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.pngI'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.pngThe iPad display seems to change at will. X)
Any ideas?
PS the site also loads EXTREMELY slowly on iPad
http://wordpress.frontrangecommercial.netSeptember 14, 2015 at 2:39 pm #165477GingerParticipantSeptember 14, 2015 at 4:17 pm #165495michelefreeMemberIt 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!
September 14, 2015 at 4:50 pm #165501GingerParticipantOh 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
September 29, 2015 at 10:43 am #166946michelefreeMemberThank you for your support. It really helped me to understand some things. Cheers!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.