diff --git a/src/components/ResourceBreadcrumb/styles.tsx b/src/components/ResourceBreadcrumb/styles.tsx index 458b295..ebc8d3b 100644 --- a/src/components/ResourceBreadcrumb/styles.tsx +++ b/src/components/ResourceBreadcrumb/styles.tsx @@ -4,6 +4,11 @@ import styled from "styled-components" export const ResourceBreadcrumbWrapper = styled.div` display: flex; align-items: flex-start; + + @media screen and (max-width: 767px) { + flex-wrap: wrap; + margin-bottom: 16px; + } ` export const LinkWrapper = styled.div` diff --git a/src/components/ResourceHeader/index.tsx b/src/components/ResourceHeader/index.tsx index e388b7c..c73bcba 100644 --- a/src/components/ResourceHeader/index.tsx +++ b/src/components/ResourceHeader/index.tsx @@ -65,9 +65,9 @@ export function ResourceHeader({ {title} - - {authors.length} contributor{authors.lenght > 1 && "s"} + {authors.length} contributor + {authors.lenght > 1 && "s"} {dateToHuman} diff --git a/src/components/ResourceHeader/styles.tsx b/src/components/ResourceHeader/styles.tsx index 8a716eb..a73c25e 100644 --- a/src/components/ResourceHeader/styles.tsx +++ b/src/components/ResourceHeader/styles.tsx @@ -11,6 +11,11 @@ export const ResourceHeaderWrapper = styled.div` export const Top = styled.div` display: flex; align-items: center; + + @media screen and (max-width: 767px) { + flex-direction: column; + align-items: flex-start; + } ` export const Title = styled.h1` @@ -22,10 +27,23 @@ export const Title = styled.h1` ` export const Meta = styled.div` + display: flex; + align-items: center; + & + &::before { content: "•"; margin: 0 8px; } + + @media screen and (max-width: 767px) { + & + & { + margin-top: 8px; + } + + & + &::before { + display: none; + } + } ` const ExtraLinks = styled.div`