Here is a good example of using Firefox Responsive Design View, DOM and Style Inspector to debug web design issues. Noticed this problem with Mozilla The Den blog's site description while browsing the web with Firefox Mobile browser. Fired up my laptop to check this design issue with Firefox Responsive Design View. Then I used the DOM and Style Inspector to zero in on the CSS rule that adds this extra padding (padding-right: 340px;). Voila! It is time to send this patch to the developer.
Did a screen capture of the whole process. Don't see the embedded video, you can watch it on YouTube.
Awesome, glad you find it useful.
ReplyDeleteThis is https://bugzilla.mozilla.org/show_bug.cgi?id=754355 FYI
ReplyDeleteFixed in https://bugzilla.mozilla.org/show_bug.cgi?id=840017
DeleteSomewhat ironic that this page's "You can leave a comment here using your Google account, OpenID or as an anonymous user." has far too much right padding on Firefox on Android.
ReplyDeleteGreat post, though.
Strange Blogger.com is not sending mobile template views to Firefox for Android. Need to file a bug for that.
DeleteThanks, Will keep that in mind during the next UI refresh of this blog.
Mobile View of this post http://playingwithsid.blogspot.com/2013/02/firefox-responsive-design-view-to-rescue.html?m=1
DeleteFixed the comment form issue. :)
Delete