Insufficient Spacing Between Logos on Small Screens

FaisalIbrahim404 commented 6 months ago

Problem Description

On smaller screen devices, the logos in our application are displayed without adequate spacing. This results in a cluttered appearance that could negatively impact the user experience, particularly on mobile devices where screen real estate is limited.

Expected Behavior

Logos should have consistent spacing across all device sizes. This will ensure that the layout remains clean and visually appealing, even on smaller screens.

Steps to Reproduce

Open the application on any mobile device or use a responsive design testing tool.
Navigate to the page containing the logo display.
Observe that the logos are cramped together without proper spacing.

Proposed Enhancements

Adjust CSS to include responsive margin or padding around each logo.
Implement a grid system or flexbox that better handles spacing based on the screen width.
Test changes across multiple screen sizes to ensure consistency.

Suggested Technical Approach

We could utilize gap size. For instance: gap-5 TailwindCss

hazem-moh commented 6 months ago

changed line height of the header.
utilize gap size to gap-3 TailwindCss.
In large screens :
In small screens

0x61nas commented 6 months ago

plz, don't close the issues until the related PRs gets merged @hazem-moh

dragonsbootcampllc / ReactFlaim