fixing hover effect on cards on News page #4691
Conversation
Signed-off-by: Vamshi Reddy <[email protected]>
|
🚀 Preview for commit 34515fa at: https://64ccac8c0ad7296318b84040--layer5.netlify.app |
|
Hey @VamshiReddy02 Let's discuss it on the websites call. |
There was a problem hiding this comment.
At this card here on hovering , still image is cutting! @VamshiReddy02
There was a problem hiding this comment.
+1 to @abhijeetgauravm 's point and also one more. The bottom of this image is getting cut even before we hover
Signed-off-by: Vamshi Reddy <[email protected]>
|
🚀 Preview for commit ecbd9f7 at: https://64d516ba8eac69031382dbd6--layer5.netlify.app |
|
Hey @abhijeetgauravm and @HetviSoni, I made some changes. Please Review my changes again and please let me know of any changes. |
src/components/Card/Card.style.js
Outdated
| height:80%; | ||
| width:70%; | ||
| margin-top: 0.5rem; | ||
| margin-left: 3rem; |
There was a problem hiding this comment.
Here you have explicitly added margin-left as 3rem which is causing alignment issues on some screen size between desktop and mobile(image is not in center of the card).
Maybe you can try
margin:auto; margin-top:0.5rem;
There was a problem hiding this comment.
Well good work @VamshiReddy02 it is working for the desktop screen.
Signed-off-by: Vamshi Reddy <[email protected]>
|
🚀 Preview for commit 2bd692f at: https://64d529b3903428009dc8d570--layer5.netlify.app |
|
Thank you @HetviSoni for the suggestion. I added |
|
Hey Everyone, If everything looks good then can you merge this PR? |
There was a problem hiding this comment.
@VamshiReddy02 Not quite,
- too much padding in directions where it was not needed
- updating classes' styles that are assigned to multiple elements will have effects, go to /resources, and /blog sections to review the changes.
We needed to specifically update the particular section's elements. Since the images are of different dimensions, we cannot ensure to prevent image overflow for each of them.
@VamshiReddy02 @HetviSoni, please conclude this task by this week
|
Ah yes @thisiskaransgit I just forgot that it would also affect other elements😯. @VamshiReddy02 please look into these suggestions. |
Signed-off-by: Vamshi Reddy <[email protected]>
|
🚀 Preview for commit 99ddeb8 at: https://64d68fbcfaf31907e05eeff1--layer5.netlify.app |
|
LGTM now |
|
@VamshiReddy02 Let's discuss it on the websites call. Please add this as an agenda item in the meeting minutes, if you would :) |
|
hello everyone, please let me know of any changes. |
Description
This PR fixes #4470
I'm sorry for closing my Last PR because of some technical issues. As you all suggested I added Margin to the images and reduced their size also, please let me know of any changes.
Signed commits