Photos are not automatically resizing on responsive websites on Firefox, but look fine on other web browsers - why?
On our blog - craftingconnections.net/the-blog larger images are not being properly resized within the body of the post and are instead hanging off into the sidebar. This looks terrible. I'm wondering if it's a bug or something I can fix?
Screenshot of site on Firefox: https://dl.dropboxusercontent.com/u/88631932/Crafting%20Connections%20on%20Firefox.png
Screenshot of site on Safari: https://dl.dropboxusercontent.com/u/88631932/Crafting%20Connections%20on%20Safari.png
Thanks for your help!
Here is the troubleshooting info: Application Basics
Name: Firefox Version: 29.0 User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:29.0) Gecko/20100101 Firefox/29.0
Crash Reports for the Last 3 Days
All Crash Reports
Extensions
Name: Add to Amazon Wish List Button Version: 1.10 Enabled: true ID: amznUWL2@amazon.com
Name: convosender Version: 2.3 Enabled: true ID: convosender@shmetsy.com
Name: Pocket Version: 3.0.4 Enabled: true ID: isreaditlater@ideashower.com
Name: shmetsy's sketchy Version: 2.3 Enabled: true ID: draftcreator@shmetsy.com
Name: shmetsy's tools Version: 2.3 Enabled: true ID: shmetsyFF@shmetsy.com
Name: shmetsy's treasury maker Version: 2.3 Enabled: true ID: treasurymaker@shmetsy.com
Name: Website Record Hosting Information Provider Version: 0.5 Enabled: true ID: contact.websiterecord@gmail.com
Important Modified Preferences
accessibility.typeaheadfind.flashBar: 0 browser.cache.disk.capacity: 358400 browser.cache.disk.smart_size_cached_value: 358400 browser.cache.disk.smart_size.first_run: false browser.cache.disk.smart_size.use_old_max: false browser.places.smartBookmarksVersion: 6 browser.sessionstore.upgradeBackup.latestBuildID: 20140421221237 browser.startup.homepage: http://www.google.com/ browser.startup.homepage_override.buildID: 20140421221237 browser.startup.homepage_override.mstone: 29.0 dom.mozApps.used: true dom.w3c_touch_events.expose: false extensions.lastAppVersion: 29.0 font.internaluseonly.changed: false network.cookie.prefsMigrated: true places.database.lastMaintenance: 1400866733 places.history.expiration.transient_current_max_pages: 104858 places.history.expiration.transient_optimal_database_size: 167772160 plugin.disable_full_page_plugin_for_types: application/pdf plugin.importedState: true print.macosx.pagesetup-2: PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHBsaXN0IFBVQkxJQyAiLS8vQXBwbGUvL0RURCBQTElTVCAxLjAvL0VO print.print_bgcolor: false print.print_bgimages: false print.print_colorspace: print.print_command: print.print_downloadfonts: false print.print_duplex: 0 print.print_evenpages: true print.print_in_color: true print.print_margin_bottom: 0.5 print.print_margin_left: 0.5 print.print_margin_right: 0.5 print.print_margin_top: 0.5 print.print_oddpages: true print.print_orientation: 0 print.print_page_delay: 50 print.print_paper_data: 0 print.print_paper_height: 11.00 print.print_paper_name: print.print_paper_size_type: 1 print.print_paper_size_unit: 0 print.print_paper_width: 8.50 print.print_plex_name: print.print_printer: print.print_resolution: 0 print.print_resolution_name: print.print_reversed: false print.print_scaling: 1.00 print.print_shrink_to_fit: true print.print_to_file: false print.print_unwriteable_margin_bottom: 17 print.print_unwriteable_margin_left: 25 print.print_unwriteable_margin_right: 25 print.print_unwriteable_margin_top: 17 privacy.donottrackheader.enabled: true privacy.sanitize.migrateFx3Prefs: true security.warn_viewing_mixed: false storage.vacuum.last.index: 0 storage.vacuum.last.places.sqlite: 1400157380
Graphics
Device ID: 0x 126 GPU Accelerated Windows: 4/4 OpenGL (OMTC) Vendor ID: 0x8086 WebGL Renderer: ATI Technologies Inc. -- ATI Radeon HD 6750M OpenGL Engine windowLayerManagerRemote: true AzureCanvasBackend: quartz AzureContentBackend: quartz AzureFallbackCanvasBackend: none AzureSkiaAccelerated: 0
JavaScript
Incremental GC: true
Accessibility
Activated: false Prevent Accessibility: 0
Library Versions
NSPR Expected minimum version: 4.10.3 Version in use: 4.10.3
NSS Expected minimum version: 3.16 Basic ECC Version in use: 3.16 Basic ECC
NSSSMIME Expected minimum version: 3.16 Basic ECC Version in use: 3.16 Basic ECC
NSSSSL Expected minimum version: 3.16 Basic ECC Version in use: 3.16 Basic ECC
NSSUTIL Expected minimum version: 3.16 Version in use: 3.16
Chosen solution
This is a problem with the "Pinterest Pin It Button For Images" plugin for WordPress. It wraps the image in a <span> element which has the display style set to "inline-block". This causes Firefox to miscalculate the available width and simply show the image full size all the time.
If you love this plugin and can't find a good alternative, edit the following style sheet:
Line 65 from:
display: inline-block;
to:
display: block;
Testing on Windows 7, it works in current Firefox and Chrome, but I didn't test IE.
Read this answer in context 👍 2All Replies (1)
Chosen Solution
This is a problem with the "Pinterest Pin It Button For Images" plugin for WordPress. It wraps the image in a <span> element which has the display style set to "inline-block". This causes Firefox to miscalculate the available width and simply show the image full size all the time.
If you love this plugin and can't find a good alternative, edit the following style sheet:
Line 65 from:
display: inline-block;
to:
display: block;
Testing on Windows 7, it works in current Firefox and Chrome, but I didn't test IE.