From fdec41c3071faf6a0d65e59778a24307fdfcb03c Mon Sep 17 00:00:00 2001 From: greedy_wudpeckr Date: Thu, 31 Jul 2025 21:43:17 +0000 Subject: [PATCH] fixed-card-responsiveness Signed-off-by: greedy_wudpeckr --- src/components/Card/Card.style.js | 158 +++++++++++++++++++++++++++--- 1 file changed, 145 insertions(+), 13 deletions(-) diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js index bb0b988977ff4..e458f8187dbcb 100644 --- a/src/components/Card/Card.style.js +++ b/src/components/Card/Card.style.js @@ -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}; @@ -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%; @@ -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; } } @@ -60,51 +69,92 @@ 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}; @@ -112,18 +162,49 @@ export const CardWrapper = styled.div` 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{ @@ -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{ @@ -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; + } + } +`; \ No newline at end of file