Skip to content

fixed-card-responsiveness for related Resources #6668

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fixed-card-responsiveness for related Resources #6668

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fdec41c
fixed-card-responsiveness
greedy-wudpeckr Jul 31, 2025
b6d8580
Merge branch 'master' into card-fix
vr-varad Aug 5, 2025
46d27c7
Merge branch 'master' into card-fix
vr-varad Aug 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 145 additions & 13 deletions src/components/Card/Card.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export const CardWrapper = styled.div`
background-Color:${props => props.theme.grey212121ToWhite};
box-shadow: 0px 2px 6px 0px ${props => props.theme.green00D3A9ToBlackTwo};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
/* Fix: Ensure the card doesn't overflow its container */
overflow: hidden;
display: flex;
flex-direction: column;

&:hover{
box-shadow: 0px 2px 15px 4px ${props => props.theme.whiteNineToBlackOne};
Expand Down Expand Up @@ -40,6 +44,8 @@ export const CardWrapper = styled.div`
height: 11.5rem;
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
/* Fix: Prevent shrinking on mobile */
flex-shrink: 0;

.gatsby-image-wrapper, .old-gatsby-image-wrapper{
height:100%;
Expand All @@ -52,6 +58,9 @@ export const CardWrapper = styled.div`
display: block;
text-align: center;
margin: auto;
/* Fix: Ensure images don't overflow */
width: 100%;
object-fit: cover;
}

}
Expand All @@ -60,70 +69,142 @@ export const CardWrapper = styled.div`
.post-content-block{
padding: 1rem 2rem;
height: 8rem;
/* Fix: Allow content to grow and add proper overflow handling */
flex: 1;
display: flex;
flex-direction: column;
min-height: 8rem;

/* Fix: Ensure padding works on all screen sizes */
@media screen and (max-width: 480px) {
padding: 1rem 1rem;
min-height: 9rem;
}

@media screen and (max-width: 320px) {
padding: 0.75rem;
min-height: 10rem;
}
}

@media screen and (max-width: 1200px) and (min-width: 992px){
.post-thumb-block{
height: 12rem;

}

.post-content-block{
height: 10rem;
min-height: 10rem;
}


}


@media screen and (max-width: 670px) and (min-width: 560px){
.post-content-block{
height: 10rem;

min-height: 10rem;
}
}

@media screen and (max-width: 350px){
.post-content-block{
height: 10rem;
min-height: 10rem;
}
}

.post-title{
font-size: 1.4rem;
font-weight: 400;
white-space: nowrap;
/* Fix: Replace single-line truncation with multi-line for better mobile experience */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
margin-bottom: 0.5rem;

/* Fix: Responsive font sizing */
@media screen and (max-width: 768px) {
font-size: 1.2rem;
-webkit-line-clamp: 3;
}

@media screen and (max-width: 480px) {
font-size: 1.1rem;
}

@media screen and (max-width: 320px) {
font-size: 1rem;
}
}

.post-meta-block{
height: auto;
display: flex;
margin-buttom: 0.5rem;
margin-bottom: 0.5rem;
/* Fix: Better responsive behavior for meta information */
flex-wrap: wrap;
gap: 0.5rem;

/* Fix: Stack on very small screens */
@media screen and (max-width: 400px) {
flex-direction: column;
gap: 0.25rem;
}

.author{
text-align: end;
/* Fix: Don't force text-align on small screens */
@media screen and (max-width: 400px) {
text-align: left;
}
}
.author, p{
color: ${props => props.theme.whiteSixToBlackSix};
font-size: 0.9rem;
font-weight: 400;
flex: auto;
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
/* Fix: Prevent text overflow */
word-break: break-word;

@media screen and (max-width: 480px) {
font-size: 0.85rem;
}

@media screen and (max-width: 320px) {
font-size: 0.8rem;
}
}
.type{
text-align: end;
font-size: 1rem;
font-weight: 400;
/* Fix: Responsive type sizing */
@media screen and (max-width: 480px) {
font-size: 0.9rem;
}

@media screen and (max-width: 400px) {
text-align: left;
}

@media screen and (max-width: 320px) {
font-size: 0.85rem;
}
}
}

.readmore-btn-wrapper{
display:flex;
display: flex;
justify-content: flex-start;
/* Fix: Add margin-top auto to push buttons to bottom */
margin-top: auto;
/* Fix: Better responsive spacing */
gap: 0.5rem;
align-items: center;

/* Fix: Stack buttons on very small screens if needed */
@media screen and (max-width: 320px) {
flex-wrap: wrap;
}
}

.readmore-btn::after{
Expand All @@ -135,26 +216,54 @@ export const CardWrapper = styled.div`
right: 0;
bottom: 0;
}

.readmore-btn, .external-link-btn{
color: ${props => props.theme.whiteFourToBlackFour};
display: flex;
flex: auto;
align-items: center;
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
/* Fix: Prevent text overflow in buttons */
white-space: nowrap;
min-width: 0; /* Allow flexbox to shrink */

/* Fix: Better touch targets on mobile */
@media screen and (max-width: 768px) {
min-height: 44px;
padding: 0.5rem;
}

svg{
font-size: 1.5rem;
transition: all 0.3s;
/* Fix: Prevent icon from shrinking */
flex-shrink: 0;

@media screen and (max-width: 480px) {
font-size: 1.3rem;
}
}
}

.external-link-btn{
justify-content: flex-end;
/* Fix: Limit width so it doesn't take too much space */
flex: 0 0 auto;
max-width: 60px;

svg{
font-size: 2rem;
padding: 0.25rem;
position: relative;

@media screen and (max-width: 480px) {
font-size: 1.8rem;
padding: 0.2rem;
}

@media screen and (max-width: 320px) {
font-size: 1.6rem;
}
}

&:hover{
Expand All @@ -164,4 +273,27 @@ export const CardWrapper = styled.div`
}
}
}
`;

/* Fix: Additional mobile-specific improvements */
@media screen and (max-width: 768px) {
.post-block {
margin-bottom: 1.5rem;
}
}

@media screen and (max-width: 480px) {
.post-block {
margin-bottom: 1rem;
}

.post-thumb-block {
height: 10rem;
}
}

@media screen and (max-width: 320px) {
.post-thumb-block {
height: 9rem;
}
}
`;