Community Forums › Forums › Archived Forums › General Discussion › Agency Pro .home-middle on mobile
Tagged: mobile
- This topic has 8 replies, 2 voices, and was last updated 9 years, 9 months ago by David Chu.
-
AuthorPosts
-
June 27, 2014 at 11:06 am #111781TracyMember
I’m building a site using the Agency Pro theme, I've also followed the tutorial so that the home middle sections directs to 'pages' rather than the 6 featured posts the demo uses. Just giving this information here but I don't think(?) this is the issue. My main issue is with the display of these 6 boxes vertically on my iPhone and vertically and horizontal on the iPad. Im not so good with any of the mobile settings and need a bit of help here please. I've looked at a few other sites using Agency Pro and there doesn't seem to be the same problems on these devices as mine. Thankyou for any help. The site is http://cowcafe.ca/
http://cowcafe.ca/June 27, 2014 at 3:06 pm #111801David ChuParticipantTracy,
That is very complicated, and as such is an interesting CSS brainteaser. I'm honestly not absolutely positive without boots on the ground, but I have a idea to test. Both sites use Home Middle widget. There's a bit of CSS that I believe is needed for Home Middle that is in theirs but not in yours.Yours:
.home-bottom .featuredpost .post:nth-of-type(3n+1) { clear: left; }
Theirs:
.home-bottom .featuredpost .post:nth-of-type(3n+1), .home-middle .featuredpost .post:nth-of-type(3n+1) { clear: left; }
I think that's also why your Home Bottom works. (Did I say that?)
You can peek at both and compare. Maybe theirs has a few newer fixes in it.
http://cowcafe.ca/wp-content/themes/agency-pro/style.css
http://demo.studiopress.com/agency/wp-content/themes/agency-pro/style.cssCheers, Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
June 27, 2014 at 5:40 pm #111819TracyMemberDavid, I appreciate the time you have taken to help me but unfortunatelly that wasn't it. I am however slowly narrowing it down... still not fixed but as I said I used this tutorial to redirect to my pages rather than posts and selected in the widget area to show my Post title and my excerpt. These together seems to throw off the padding as I can see a portion of the excerpt below the image. With only 1 of them selected ie; Post title or Excerpt there is no padding issue but I still get the 2 extra blank white boxes.
June 27, 2014 at 7:02 pm #111823TracyMemberSo, I found a website through the forum and I copied some of their code, mostly the same as David above said to do, which I did but only in 1 spot. Now that has removed the white/blank boxes but If I want to have my excerpt and Post title in there I now still have the padding issue and having a hard time figuring that out. I'll carry on but I'm just updating as I go in case someone can help too. Thanks again
June 27, 2014 at 8:16 pm #111828David ChuParticipantI'm glad you're getting there. I could barely find what I did, it's quite gnarly. 🙂 Responsive testing nearly always yields bizarreness.
Good luck!
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
June 27, 2014 at 9:45 pm #111837TracyMemberWell it certainly is not perfect, it was very frustrating and took a whole day! None of it really made sense to me. I wonder now if someone could please look and tell me if it is acceptable now or if there are issues that I am over looking now. Thankyou
June 29, 2014 at 2:17 pm #112013David ChuParticipantYou have the "we'll be launching soon" thingie on there, so I can't check it. I will assume you figured it out!
Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
June 29, 2014 at 2:57 pm #112018TracyMemberThankyou Dave, I think it is looking pretty good but I would love it if you would test it out for me and let me know if you see anything weird. I don't mind it but I don't think the boxes from the iPhone are correct??
Thanks, I've disabled the maintenance again.
June 29, 2014 at 3:24 pm #112020David ChuParticipantTracy,
I'm looking at it with an emulator, so I can't guarantee every last bit. What I'm seeing for small tablet size and below looks great, though, including iPhone size. The ones that are looking funky to me are the iPad ones, I'm afraid.When I looked at it before, apart from the stuff I mentioned, I had wondered if the actual content may have something to do with it. This is very common in my experience - no matter how adept one's CSS plan and coding is, a client's data can easily ruin the planned scenario. This is the bane of content management!
Here's my theory about that. The photos are nice 380x380 squares. So far, awesome, and just like the demo, if memory serves. It seems to me that the longer content of "Menu" and "About Us" are quite long for that box, and they might be borking your scheme. You could test that pretty quick, either by shrinking the font in those boxes, or just temporarily cutting out some of the text in those.
Beyond that, just as you said, it's painstaking and annoying analysis. The stuff that takes quite a bit of grief/time, and that I generally don't do for free. I've had clients that got up in arms with responsive stuff on, say, one brand/model of phone, when suddenly turned sideways, or what-have-you. I don't guarantee that degree of perfection, because you'd have to test with 200 phones, and it would take eons. That's the type of job for a phone CSS specialist, IMO.
Sorry about that, and I hope that helps you a bit,
Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.