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`