Fix improve hover effects and blog card sizing for consistency and a modern user interface. #673
Conversation
- Set fixed width and height for .fixed-card-size in blogs-new.css - Used flexbox and line clamping for consistent card layout - Updated BlogCard component to use line-clamp classes for title and description - Now all cards remain visually equal regardless of content length
…onal appearance - Updated BlogCard component to use semantic, BEM-style class names and removed all inline styles and JS hover logic - Moved all card styling and hover/scale transitions to blogs.css for instant, smooth feedback - Improved card layout, image scaling, overlay, and Read Article button styling for a modern, accessible look - Ensured responsive design and consistent appearance across devices
|
@ishubtripathi is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
|
Hi @ishubtripathi , could you add a video about of how the changes working for a better review process. |
There was a problem hiding this comment.
Request for video for the changes and also the linked or assigned issue.
@sanjay-kv @ishubtripathi
|
After changes, the result looks something like this @sanjay-kv @Adez017 Contribution.mp4 |
|
@ishubtripathi , i noticed that in your chnages the latency has been fixed but if you carefully observed there is a hover effect and the cards comes up a little up but in the video that has gone , i want that instead of remove that completely you can fix that and ping me again .Also please link the issue for this |
|
Okay, I'll fix it |
|
@Adez017 Now you can check it out, I'll add the smooth scale-up animation on the blog card while hover on it. |
Shared the video @ishubtripathi |
|
Also mention the issue no. |
|
LGTM ! @ishubtripathi |
Adez017
added
gssoc25
level 2
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There is a huge gap between the cards @ishubtripathi b/w liked the before and after video |
…bsite responsive for all screen size devices
|
@sanjay-kv You are correct, it is showing the huge gap between cards when it is open in large screen devices, I apologize for my mistake that I did not cross check it on all types of devices, But now it is responsive for all screen size device, you can check it out. 
|
iitzIrFan
added
under review
|
@ishubtripathi Any updates ? |
Description
This PR fixes visual inconsistencies in blog cards and updates their styling for better layout, consistency, and a polished look.
blogs-new.cssfor easier maintenance and quicker feedback.Fixes # (issue)
Type of Change
Changes Made
.fixed-card-sizeto standardize card sizes..article-cardand its children for consistent alignment.Dependencies
Checklist
npm run buildand attached a screenshot in this PR.