diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx index 5b32e88a9b..d868e1f07e 100644 --- a/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx +++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx @@ -46,6 +46,8 @@ const StyledSubHeading = styled.div` const StyledImage = styled.img` border-bottom: 1.5px solid #14141429; height: 160px; + border-top-right-radius: 8px; + border-top-left-radius: 8px; `; export default function UserGuideCard({ diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx index d553040cba..1b0166ec6f 100644 --- a/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx +++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx @@ -38,6 +38,11 @@ const StyledWrapper = styled.div` max-width: 720px; margin: ${Theme.spacing(10)} 92px ${Theme.spacing(20)}; } + + @media (min-width: 1500px) { + max-width: 720px; + margin: ${Theme.spacing(10)} auto ${Theme.spacing(20)}; + } `; const StyledHeader = styled.div` diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx index 7149076390..1e8ebdd2e9 100644 --- a/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx +++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx @@ -13,6 +13,9 @@ const StyledContainer = styled.div` flexDirection: 'row', justifyContent: 'center', })}; + @media (min-width: 1500px) { + width: 100%; + } `; const StyledWrapper = styled.div` @@ -30,6 +33,12 @@ const StyledWrapper = styled.div` padding: ${Theme.spacing(10)} 50px ${Theme.spacing(20)}; align-items: center; } + + @media (min-width: 1500px) { + width: 720px; + padding: ${Theme.spacing(10)} 0px ${Theme.spacing(20)}; + margin-right: 300px; + } `; const StyledTitle = styled.div`