Fixed Image CTA (Portrait) Cut Off in Safari Instead of Being Responsive

[OpuRockey]

Summary

This PR fixes an issue where the Image CTA (Portrait) was being cut off in Safari instead of scaling responsively. The problem was caused by Safari’s handling of sizing and aspect-ratio behavior, which differed from other modern browsers.

Problem

• In Safari, the portrait Image CTA did not resize correctly.
• Parts of the image were clipped when viewed on certain screen sizes.
• The same layout behaved as expected in Chrome and Firefox.

Solution

• Added necessary CSS adjustments to ensure consistent responsive behavior in Safari.
• Ensured the portrait image scales correctly without being cut off.
• Kept the fix scoped to styling only, with no impact on markup or functionality.

Impact

• Improves cross-browser consistency, specifically for Safari users.
• Ensures the Image CTA remains fully visible and responsive across devices.
• No breaking changes or side effects expected.

Testing

• Verified on Safari (desktop).
• Confirmed no regressions in Chrome and Firefox.
• Checked responsiveness across multiple viewport sizes

Issue: #1145

[github-actions]

🔍 WordPress Plugin Check Report

❌ Status: Failed

📊 Report

🎯 Total Issues	❌ Errors	⚠️ Warnings
29	12	17

---

❌ Errors (12)

📁 inc/classes/wpforms/wpforms-field-godam-record-frontend.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

📁 inc/classes/wpforms/wpforms-field-godam-record-entry-view.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

📁 inc/classes/wpforms/wpforms-field-godam-record-entry-edit.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

📁 inc/classes/class-rewrite.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

📁 inc/classes/class-elementor-widgets.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

📁 inc/classes/everest-forms/everest-forms-field-godam-record-frontend.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

📁 inc/classes/assets/class-ima-assets.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

📁 inc/classes/assets/class-jetpack-form-assets.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

📁 inc/classes/class-video-preview.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

📁 inc/classes/lifter-lms/class-lifter-lms.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

📁 inc/classes/fluentforms/class-form-submit.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

📁 inc/classes/class-video-engagement.php (1 error)

📍 Line	🔖 Check	💬 Message
0	missing_direct_file_access_protection	PHP file should prevent direct access. Add a check like: if ( ! defined( 'ABSPATH' ) ) exit;

---

⚠️ Warnings (17)

📁 composer.json (1 warning)

📍 Line	🔖 Check	💬 Message
0	missing_composer_json_file	The "/vendor" directory using composer exists, but "composer.json" file is missing.

📁 readme.txt (2 warnings)

📍 Line	🔖 Check	💬 Message
0	mismatched_plugin_name	Plugin name "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" is different from the name declared in plugin header "GoDAM".
0	trademarked_term	The plugin name includes a restricted term. Your chosen plugin name - "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" - contains the restricted term "wordpress" which cannot be used at all in your plugin name.

📁 inc/classes/media-library/class-media-folder-utils.php (1 warning)

📍 Line	🔖 Check	💬 Message
91	PluginCheck.Security.DirectDB.UnescapedDBParameter	Unescaped parameter $where_clause used in $wpdb->get_var($wpdb->prepare(\n\t\t\t\t"\n\t\t\tSELECT COUNT(DISTINCT p.ID)\n\t\t\tFROM {$wpdb->posts} p\n\t\t\tINNER JOIN {$wpdb->term_relationships} tr ON p.ID = tr.object_id\n\t\t\tINNER JOIN {$wpdb->term_taxonomy} tt ON tr.term_taxonomy_id = tt.term_taxonomy_id\n\t\t\tWHERE {$where_clause}\n\t\t",\n\t\t\t\t$query_params\n\t\t\t))\n$where_clause assigned unsafely at line 82:\n $where_clause .= ' AND p.post_mime_type LIKE %s'\n$query_params[] used without escaping.\n$mime_type used without escaping.

📁 assets/build/css/main.css (1 warning)

📍 Line	🔖 Check	💬 Message
0	EnqueuedStylesScope	This style is being loaded in all contexts.

📁 assets/src/libs/analytics.min.js (6 warnings)

📍 Line	🔖 Check	💬 Message
0	EnqueuedScriptsScope	This script is being loaded in all frontend contexts.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?p=1 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?page_id=2 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?attachment_id=6 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?godam-video=demo-godam-video-post (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.

📁 assets/build/js/main.min.js (6 warnings)

📍 Line	🔖 Check	💬 Message
0	EnqueuedScriptsScope	This script is being loaded in all frontend contexts.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?p=1 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?page_id=2 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?attachment_id=6 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?godam-video=demo-godam-video-post (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.

---

🤖 Generated by WordPress Plugin Check Action • Learn more about Plugin Check

[Copilot]

Pull request overview

This PR fixes a Safari-specific rendering issue where portrait Image CTA components were being cut off instead of scaling responsively. The solution introduces CSS container queries to enable responsive behavior based on the container size rather than viewport size, ensuring consistent cross-browser behavior.

Key Changes:

• Added container query support to .easydam-layer to enable size-based responsive styles
• Implemented responsive font sizing using clamp() for better text scaling
• Added container-based breakpoints for portrait CTA layout adjustments

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[subodhr258]

@OpuRockey I have reviewed and tested this fix, it's still cropping out a part of the CTA container, which leads to a scroll.
It should look the same as the CTA in chrome, please have a look at this recording:

Screen.Recording.2025-12-24.at.8.22.53.PM.mov

[OpuRockey]

Dashboard.mp4

@subodhr258 , It should be fixed by now. Could you please check again?

[subodhr258]

LGTM, made a small improvement and tested with longer title and description, it is properly scrollable.