fix(ui): responsive "Our Plugins" flexbox layout

[faisalahammad]

Summary

Updates the "Our Plugins" section layout on the settings page to use Flexbox rather than obsolete floats, fixing unresponsive overlapping cards on smaller screens.

Fixes #1009

Problem

On smaller screens (e.g. tablet width), the plugins section cards overlap each other horizontally instead of neatly wrapping to new rows, making the text unreadable and the logos break container bounds. The original float-based CSS (float: left; width: 25%;) did not properly trigger responsive clearing.

Solution

Wrapped the PHP loop for the plugins with a new semantic container (.imagify-plugin-family-cards) and migrated the columns to use strict CSS Flexbox sizing (flex: 0 0 25%) with logical breakpoint shifts to 50% width and 100% width. Tested across devices.

Changes

views/page-settings.php

Before:

<?php foreach ( $data['plugin_family'] as $plugin_name => $plugin_data ) : ?>
	<div class="imagify-plugin-family-col">

After:

<div class="imagify-plugin-family-cards">
<?php foreach ( $data['plugin_family'] as $plugin_name => $plugin_data ) : ?>
	<div class="imagify-plugin-family-col">

Why this works:
Flexbox requires a parent flex container to dictate layout rules to children (flex-wrap: wrap). This new wrapper isolates the layout from the other text elements on the page.

assets/css/admin.css

Before:

.imagify-plugin-family-col {
	float: left;
	width: 25%;
	box-sizing: border-box;

After:

.imagify-plugin-family-col {
	width: 25%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;

Why this works:
Using flex column ensures inner child margins and heights operate elegantly. Additional @media breakpoints at 1200px and 600px allow the width to elegantly pop from 4 items, to 2 items, and then 1 item per row.

Testing

Manual Testing

Scenario 1: Standard Desktop screens (> 1200px)

• Steps: Load Imagify Options page -> Scroll to Our Plugins
• Result: Shows exactly 4 cards in a single row

Scenario 2: Tablet/Small screens (< 1200px)

• Steps: Shrink screen bounds between 1200px and 600px
• Result: Fluidly snaps to exactly 2 cards per row.

Scenario 3: Mobile (< 600px)

• Steps: Shrink window horizontally below 600px
• Result: Cards stack perfectly as a single column. No logo overlap occurs.

Screen recording

imagify-our-plugins-section-responsive-test.mp4

[Copilot]

Pull request overview

Updates the Settings page “Our Plugins” section to use a flexbox-based card grid so plugin cards wrap cleanly on smaller viewports (fixing the overlap/overflow reported in #1009).

Changes:

• Added a dedicated wrapper container (.imagify-plugin-family-cards) around the plugin-family loop in the settings template.
• Replaced the float-based 4-column layout with a wrapping flexbox grid and added responsive breakpoints (4 → 2 → 1 columns).
• Adjusted card/logo/body/footer styles to behave better in a flex column layout (e.g., consistent footer placement, responsive logos).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
views/page-settings.php	Wrapes the plugin-family cards in a new flex container element.
assets/css/admin.css	Implements the flexbox grid + responsive breakpoints and updates card/logo/body/footer styles to prevent overlap.

---

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

[Copilot]

Imagify_Assets::register_style() serves .min.css when not in debug mode, so updating only admin.css means the responsive layout fix won’t be shipped to most installs. Regenerate/commit assets/css/admin.min.css (and any other derived CSS artifacts) so production loads the updated rules.

[remyperona]

Please also update the min file

[faisalahammad]

Thanks for the review! Regenerated assets/css/admin.min.css using the project's Grunt pipeline (grunt postcss cssmin). The new .imagify-plugin-family-cards and .imagify-plugin-family-col flexbox rules — including the responsive breakpoints — are now present in the minified file and will be served correctly in production.

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 0 complexity · 0 duplication

Metric	Results
Complexity	0
Duplication	0

View in Codacy

_{NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.}