Commit e22554b4 authored by pp-hh-ii-ll's avatar pp-hh-ii-ll Committed by GitHub

fix: responsive styling for info button (#5659)

Responsive styling for info button

Decreases gap and font size and adds margin to external link arrow icon
parent 5f1625f5
......@@ -88,20 +88,29 @@ const CardGrid = styled.div`
`
const InfoButton = styled(ButtonOutlined)`
font-size: 20px;
line-height: 24px;
font-size: 16px;
line-height: 20px;
padding: 12px;
@media screen and (min-width: ${BREAKPOINTS.md}px) {
font-size: 20px;
line-height: 24px;
}
`
const ActionsContainer = styled.span`
display: flex;
gap: 24px;
gap: 16px;
width: 100%;
& > * {
flex: 1;
}
@media screen and (min-width: ${BREAKPOINTS.sm}px) {
gap: 24px;
}
@media screen and (min-width: ${BREAKPOINTS.md}px) {
flex-direction: column;
}
......@@ -195,6 +204,7 @@ const Copyright = styled.span`
const WrappedExternalArrow = styled.span`
color: ${({ theme }) => theme.textTertiary};
margin-left: 4px;
`
export default function About() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment