Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive test site not displaying the true "look" for the Ipad/Iphone
Tagged: responsive
- This topic has 9 replies, 2 voices, and was last updated 11 years ago by Susan Nelson.
-
AuthorPosts
-
April 25, 2013 at 8:42 pm #37766computerkittenMember
Seems like websites are not accurately depicted on these test responsive websites like at at http://www.studiopress.com/responsive/.
However on the actual device it may look fine.
Example.... when testing a client site at http://tinyurl.com/blgu2rc
This site looks fine on the test responsive website for the Ipad but is messed up according to the client.
Is there any better way of testing these on these other devices without the "real" thing... or any other tools more accurately display the website?
Thanks!
CK
April 26, 2013 at 4:15 am #37807Susan NelsonParticipantI use this responsive design bookmarklet and it seems pretty accurate: http://responsive.victorcoulon.fr/. I have it in my bookmark bar in Chrome so it's always available to me.
I do see issues with your layout on all devices. Everything seems pushed off to the right.
April 26, 2013 at 7:22 am #37825computerkittenMemberThanks Susan for writing and I will try out that tool. You had mentioned things were pushed off to the right. Was this on a real device and maybe it was on the tool. I'm seeing it fine on my iPhone. And laptop and Desktop. Browser was Chrome? I was using Firefox on larger displays. Chrome the best? For accuracy and true look? Thx!!!
CK
April 26, 2013 at 7:31 am #37826Susan NelsonParticipantIt's fine on my laptop and regular computer (Chrome), but on my android phone (galaxy s3), I get a scrollbar at the bottom which makes it seem pushed off to the right. The same thing happens when I test using that bookmarklet on both the iPad and iPhone views.
Actually, I take that back about Chrome... I just viewed it in Firefox and I see that you have the content areas sitting side by side on the home page. In Chrome, they are displaying as one column.
April 26, 2013 at 7:35 am #37828computerkittenMemberStrange okay I'm not sure how anyone gets the displays right without owning the devices! It looks fine on my iPhone. Going to look at this tool. What would you do????
CK
April 26, 2013 at 7:48 am #37833Susan NelsonParticipantOn these responsive themes, I try to be super careful not to mess with any of the widths if at all possible. Did you happen to change any widths or add padding to the right/left sides of anything?
You might want to look at adding some of the divs to the box-sizing section of the CSS. Brian Gardner shared this link with me and it really helped me understand what was going on when I tried to add padding/space to various divs: http://css-tricks.com/box-sizing/
April 26, 2013 at 3:10 pm #37945computerkittenMemberHi Susan! It is indeed possible that I may have changed some widths on some things.... but no memory of exactly what. Ha! Let me look at Brian Gardner's article...thank you for sharing that!
CK
April 26, 2013 at 3:32 pm #37957computerkittenMemberHello Susan,
Just Bookmarked that website and then tested the site....now I see what is going on... how it has a skinny little column of the widgets that are shoved to the left on this test site. However... on my Iphone it looks correct. Well I will see then what the client is talking about to see if it matches what I'm seeing on that site you gave me. That is interesting. Maybe if I fix it in this test environment it will just stay how it is on the Iphone.
Thank you!
CK
April 28, 2013 at 10:12 am #38229computerkittenMemberHello Susan!
Wanted to get back to you because its all fixed up...well 99%. Just need to add a little padding for 2 devices. I had transposed some characters... like the /* and */ and used the wrong bracket at one point. So happy its fixed and it took a while to realize that part of the code was being ignored.
Thank you from the bottom of my heart!!!
CK
April 28, 2013 at 10:26 am #38230Susan NelsonParticipantGlad you got it working!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.