Firefox Responsive Design View to rescue

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.

Debugging and Fixing CSS issues with Firefox Web Developer tools

Did a screen capture of the whole process. Don't see the embedded video, you can watch it on YouTube.


7 comments:

  1. This is https://bugzilla.mozilla.org/show_bug.cgi?id=754355 FYI

    ReplyDelete
  2. Somewhat 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.

    Great post, though.

    ReplyDelete
    Replies
    1. Strange Blogger.com is not sending mobile template views to Firefox for Android. Need to file a bug for that.


      Thanks, Will keep that in mind during the next UI refresh of this blog.

      Delete
    2. Fixed the comment form issue. :)

      Delete

You can leave a comment here using your Google account, OpenID or as an anonymous user.