lilith/platform-codebase
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix(frontend): ✨ update media queries for smaller screens

Browse source
This commit is contained in:
Lilith 2026-01-10 05:47:23 -08:00
parent 0a2ed8a2d7
commit c3c73bb45e
1 changed files with 41 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
features/marketplace/frontend-public/src/features/landing/components/AudienceHero.tsx
View file

@ -317,9 +317,16 @@ const StatBadge = styled.div<{ $theme: AudienceTheme; $highlight?: boolean }>`
border-color: ${(props) => props.$theme.primary}80;
}
@media (max-width: 640px) {
@media (max-width: 768px) {
padding: 0.75rem 1rem;
}
@media (max-width: 480px) {
padding: 0.625rem 0.5rem;
border-radius: 0.5rem;
min-height: 60px;
justify-content: center;
}
`;
const StatValue = styled.span`
@ -327,9 +334,13 @@ const StatValue = styled.span`
font-weight: 700;
color: white;
@media (max-width: 640px) {
@media (max-width: 768px) {
font-size: 1.25rem;
}
@media (max-width: 480px) {
font-size: 1.1rem;
}
`;
const StatLabel = styled.span`
@ -337,6 +348,12 @@ const StatLabel = styled.span`
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
@media (max-width: 480px) {
font-size: 0.65rem;
letter-spacing: 0.03em;
}
`;
const CTAGroup = styled.div`
@ -345,6 +362,14 @@ const CTAGroup = styled.div`
gap: 1rem;
flex-wrap: wrap;
margin-top: 1.5rem;
@media (max-width: 480px) {
flex-direction: column;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0 1rem;
}
`;
const primaryCTAStyles = css<{ $theme: AudienceTheme }>`
@ -389,6 +414,14 @@ const primaryCTAStyles = css<{ $theme: AudienceTheme }>`
padding: 1rem 2rem;
font-size: 1.1rem;
}
@media (max-width: 480px) {
width: 100%;
justify-content: center;
padding: 1rem 1.5rem;
font-size: 1rem;
min-height: 48px;
}
`;
const PrimaryCTALink = styled(Link)<{ $theme: AudienceTheme }>`
@ -423,6 +456,12 @@ const secondaryCTAStyles = css<{ $theme: AudienceTheme }>`
padding: 1rem 1.5rem;
font-size: 1rem;
}
@media (max-width: 480px) {
width: 100%;
justify-content: center;
min-height: 48px;
}
`;
const SecondaryCTALink = styled(Link)<{ $theme: AudienceTheme }>`