[Examples] Remove horizontal scroll in CMS examples (#16295)

vercel · Aug 18, 2020 · b0d2a80 · b0d2a80
1 parent 1318a8d
commit b0d2a80
Show file tree

Hide file tree

Showing 16 changed files with 16 additions and 16 deletions.
diff --git a/examples/blog-starter-typescript/components/cover-image.tsx b/examples/blog-starter-typescript/components/cover-image.tsx
@@ -18,7 +18,7 @@ const CoverImage = ({ title, src, slug }: Props) => {
     />
   )
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>

diff --git a/examples/blog-starter-typescript/components/post-header.tsx b/examples/blog-starter-typescript/components/post-header.tsx
@@ -18,7 +18,7 @@ const PostHeader = ({ title, coverImage, date, author }: Props) => {
       <div className="hidden md:block md:mb-12">
         <Avatar name={author.name} picture={author.picture} />
       </div>
-      <div className="mb-8 md:mb-16 -mx-5 sm:mx-0">
+      <div className="mb-8 md:mb-16 sm:mx-0">
         <CoverImage title={title} src={coverImage} />
       </div>
       <div className="max-w-2xl mx-auto">

diff --git a/examples/blog-starter/components/cover-image.js b/examples/blog-starter/components/cover-image.js
@@ -12,7 +12,7 @@ export default function CoverImage({ title, src, slug }) {
     />
   )
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>

diff --git a/examples/blog-starter/components/post-header.js b/examples/blog-starter/components/post-header.js
@@ -10,7 +10,7 @@ export default function PostHeader({ title, coverImage, date, author }) {
       <div className="hidden md:block md:mb-12">
         <Avatar name={author.name} picture={author.picture} />
       </div>
-      <div className="mb-8 md:mb-16 -mx-5 sm:mx-0">
+      <div className="mb-8 md:mb-16 sm:mx-0">
         <CoverImage title={title} src={coverImage} />
       </div>
       <div className="max-w-2xl mx-auto">

diff --git a/examples/cms-agilitycms/components/cover-image.js b/examples/cms-agilitycms/components/cover-image.js
@@ -15,7 +15,7 @@ export default function CoverImage({ title, responsiveImage, slug }) {
     />
   )
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link href="/[...slug]" as={`/posts/${slug}`}>
           <a aria-label={title}>{image}</a>

diff --git a/examples/cms-buttercms/components/cover-image.js b/examples/cms-buttercms/components/cover-image.js
@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 export default function CoverImage({ title, url, slug }) {
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>

diff --git a/examples/cms-contentful/components/cover-image.js b/examples/cms-contentful/components/cover-image.js
@@ -12,7 +12,7 @@ export default function CoverImage({ title, url, slug }) {
     />
   )
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>

diff --git a/examples/cms-cosmic/components/cover-image.js b/examples/cms-cosmic/components/cover-image.js
@@ -22,7 +22,7 @@ export default function CoverImage({ title, url, slug }) {
     />
   )
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>

diff --git a/examples/cms-datocms/components/cover-image.js b/examples/cms-datocms/components/cover-image.js
@@ -15,7 +15,7 @@ export default function CoverImage({ title, responsiveImage, slug }) {
     />
   )
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>

diff --git a/examples/cms-graphcms/components/cover-image.js b/examples/cms-graphcms/components/cover-image.js
@@ -15,7 +15,7 @@ export default function CoverImage({ title, url, slug }) {
   )
 
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>

diff --git a/examples/cms-prismic/components/cover-image.js b/examples/cms-prismic/components/cover-image.js
@@ -12,7 +12,7 @@ export default function CoverImage({ title, url, slug }) {
     />
   )
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>

diff --git a/examples/cms-sanity/components/cover-image.js b/examples/cms-sanity/components/cover-image.js
@@ -16,7 +16,7 @@ export default function CoverImage({ title, url, slug }) {
   )
 
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>

diff --git a/examples/cms-storyblok/components/cover-image.js b/examples/cms-storyblok/components/cover-image.js
@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 export default function CoverImage({ title, url, slug }) {
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>

diff --git a/examples/cms-strapi/components/cover-image.js b/examples/cms-strapi/components/cover-image.js
@@ -5,7 +5,7 @@ export default function CoverImage({ title, url, slug }) {
     url.startsWith('/') ? process.env.NEXT_PUBLIC_STRAPI_API_URL : ''
   }${url}`
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>

diff --git a/examples/cms-takeshape/components/cover-image.js b/examples/cms-takeshape/components/cover-image.js
@@ -17,7 +17,7 @@ export default function CoverImage({ title, coverImage, slug }) {
     />
   )
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>

diff --git a/examples/cms-wordpress/components/cover-image.js b/examples/cms-wordpress/components/cover-image.js
@@ -11,7 +11,7 @@ export default function CoverImage({ title, coverImage, slug }) {
     />
   )
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>