chore: responsive design

tailcallhq · Dec 23, 2024 · cd95120 · cd95120
1 parent 0d36887
commit cd95120
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/components/tutorials/TutorialCard.tsx b/src/components/tutorials/TutorialCard.tsx
@@ -23,17 +23,19 @@ const TutorialCard: React.FC<TutorialCardProps> = ({
     <Link to={redirectionUrl} className="!no-underline">
       <div className="flex flex-col rounded-md border border-solid border-tailCall-border-light-400 cursor-pointer">
         <img src={imgUrl} />
-        <div className="flex flex-col p-6 gap-3 text-black">
-          <span className="text-content-mini">{duration}</span>
-          <span className="text-title-small line-clamp-2">{title}</span>
+        <div className="flex flex-col py-6 px-4 lg:p-6 gap-2 lg:gap-3 text-black">
+          <span className="flex flex-col gap-1 lg:gap-3">
+            <span className="text-content-mini">{duration}</span>
+            <span className="text-title-small line-clamp-2">{title}</span>
+          </span>
           <BlogAuthor
             author={{
               name: authorName,
               imageURL: authorImgUrl,
             }}
             containerClassName="mt-auto"
-            imgClassName="size-5"
-            textClassName="text-content-tiny"
+            imgClassName="size-4 lg:size-5"
+            textClassName="text-content-mini !font-medium lg:text-content-tiny"
           />
         </div>
       </div>

diff --git a/src/components/tutorials/Tutorials.tsx b/src/components/tutorials/Tutorials.tsx
@@ -5,9 +5,9 @@ import {tutorialsList} from "@site/src/constants"
 
 const Tutorials = () => {
   return (
-    <Section className="lg:pt-6">
-      <span className="text-display-small text-tailCall-dark-500">Tutorials</span>
-      <div className="grid grid-cols-3 gap-3 mt-6">
+    <Section className="!px-4 lg:!px-36 lg:pt-6">
+      <span className="text-title-large lg:text-display-small text-tailCall-dark-500">Tutorials</span>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-3 mt-7 lg:mt-6">
         {tutorialsList.map((tutorial: TutorialItem, index: number) => {
           const {imgUrl, title, duration, authorName, authorImgUrl, redirectionUrl} = tutorial
           return (