Open our company website and test it on different devices (mobile, tablet, desktop). Identify 3 issues with responsiveness and suggest improvements.

• By Mohsin shakoor
• September 1, 2025September 1, 2025
• Education

Steps to Test Responsiveness:

1. Open the website in Google Chrome → Right-click → Inspect → Select Device Toolbar (mobile/tablet/desktop).
2. Test the site on different screen sizes (e.g., iPhone, iPad, Laptop, Desktop).
3. Check for:
   • Layout shifts (text/images overlapping).
   • Navigation/menu issues.
   • Font readability.
   • Button sizes and clickability.
   • Image scaling and alignment.

📌 Example Findings (You can adapt with your actual website):

Issue 1: Navigation Menu

• Problem: On mobile, the navigation bar items overlap and are difficult to click.
• Improvement: Implement a hamburger menu with dropdowns for better usability.

Issue 2: Image Scaling

• Problem: Homepage banner images are cut off on tablets.
• Improvement: Use responsive image scaling (CSS: object-fit: cover or contain) to auto-adjust sizes.

Issue 3: Text Readability

• Problem: Font size is too small on mobile devices, making it hard to read.
• Improvement: Set responsive font sizes using relative units (em/rem) instead of fixed px.

• Share
• Share
• Pin