Skip to content

Responsive layout issue on landing page hero section #258

@LipikaAggarwal

Description

@LipikaAggarwal

On the landing page, some feature cards overlap with each other and hide parts of the hero content at certain medium screen widths. This causes text and UI elements to become partially hidden and reduces readability.

To reproduce the behavior:

  1. Go to http://localhost:5173/
  2. Resize the browser window to a width between 1024px and 1190px
  3. Observe the feature cards on the right side of the hero section
  4. Notice that some cards overlap and hide content

The feature cards should appear in a clean grid layout without overlapping, and the hero text should remain fully visible at all screen widths.

Image

Desktop:

  • OS: macOS
  • Browser: Chrome
  • Version: Latest

This issue seems to affect the md to lg breakpoint range. The layout appears fine on mobile and large desktop screens but breaks in the tablet and small laptop range.

I would like to work on fixing this issue if it’s available.

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions