kawanlb / kawanlb/Projeto-Mobile-Code

🐛 💄 CSS Bug: Incorrect Card Sizing in CardsAnimais Container

Open
#6 0 comments 0 reactions 0 assignees View on GitHub
bug good first issue help wanted
Dominant language
JavaScript
Stars
1
Forks
0
PR merge metrics
No merged PRs in 30d

Description

**Description:**
When there is only one card inside the CardsAnimais container in the Home component, the card is displayed incorrectly, appearing too large vertically.

**Steps to Reproduce:**
1. Navigate to the home page.
2. Choose a filter that results in only one animal being displayed.
3. Observe the sizing of the card inside the CardsAnimais container.

**Expected Behavior:**
The card should be displayed with appropriate sizing, maintaining consistency with other cards in the container.
![image](https://github.com/kawanlb/Projeto-Mobile-Code/assets/72166193/5481a2a2-3822-48b5-964f-50c1f4f156d3)
**Actual Behavior:**
The card appears too large vertically when it is the only card in the CardsAnimais container.
![image](https://github.com/kawanlb/Projeto-Mobile-Code/assets/72166193/a2529cef-9331-4833-8806-5100e983a884)

**Additional Context:**
This issue affects the visual consistency of the home page when only one animal is displayed. It impacts the user experience and should be addressed to ensure proper rendering of cards in all scenarios.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating the Home component and its CardsAnimais container, then reproduce the issue with a filter that leaves one animal visible. Inspect the container and card styling for the single-card case; done means the card keeps appropriate vertical sizing and visual consistency with the other-card case.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.