responsive fixes

Prototypr · Jan 31, 2024 · 4d15ba4 · 4d15ba4
1 parent 730f6e8
commit 4d15ba4
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 17 deletions.
diff --git a/components/Breadcrumbs.js b/components/Breadcrumbs.js
@@ -11,12 +11,11 @@ export default function Breadcrumbs({
 }) {
   return (
     // <div className="w-auto shadow-sm outline outline-gray-200/70 outline-1 bg-white p-2.5 rounded-xl" style={{width:'fit-content'}}>
-    <div className="w-auto" style={{width:'fit-content'}}>
+    <div className="w-auto flex text-xs md:text-sm" style={{width:'fit-content'}}>
       {links.map((item, index) => {
         return (
-          <div className="inline" key={index}>
-            {" "}
-            <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-200/30 text-gray-50/90 font-normal">
+          <>
+           <div key={index} className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-200/30 text-gray-50/90 font-normal">
               <Link href={`${item.slug}`} key={`breadcrumb_${title}_${index}`}>
                 {!item.svg ? (
                   <span className="hover:text-white">{item.name}</span>
@@ -25,10 +24,10 @@ export default function Breadcrumbs({
                 )}
               </Link>
             </div>
-            <div className="inline mx-1">
+            <div className="inline mx-1 flex flex-col justify-center">
               <ChevronRightIcon className="inline text-gray-50/90" />
             </div>
-          </div>
+          </>
         );
       })}
       {currentSlug == "toolbox" ? (
@@ -42,7 +41,7 @@ export default function Breadcrumbs({
             Toolbox
           </Link>
         </div>
-        <div className="inline mx-1">
+        <div className="inline mx-1 flex flex-col justify-center">
               <ChevronRightIcon className="inline text-gray-50/90" />
             </div>
         <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-400/60">

diff --git a/components/toolbox/ToolboxHeroWithEmailSignup.js b/components/toolbox/ToolboxHeroWithEmailSignup.js
@@ -129,7 +129,7 @@ const ToolBoxHeroWithSignup = ({user}) => {
                 </h1>
                 <div className="text-center text-gray-600 max-w-[600px] text-lg mt-3 mx-auto">Join 25k+ readers receiving Prototypr Weekly. Improve your workflow with the latest tools, news and design resources.</div>
                 <div className="mt-12 mb-2">
-                <SignupHorizontal showNoSpam={true} className="sm:flex justify-center mx-auto w-[505px] mt-5 mb-6" />
+                <SignupHorizontal showNoSpam={true} className="sm:flex justify-center mx-auto w-full px-6 lg:px-0 lg:w-[505px] mt-5 mb-6" />
                 </div>
             </div>
             }

diff --git a/components/toolbox/ToolboxIndexPage.jsx b/components/toolbox/ToolboxIndexPage.jsx
@@ -61,7 +61,7 @@ const ToolboxIndexPage = ({
             // backgroundColor: stc(`${title}`),
             // backgroundImage: `url(${"/static/images/espi1400.png"})`,
           }}
-          className="relative bg-[#2f62c7]/90 -mt-[96px] pt-[96px] pb-20 overflow-hidden p-6 shadow-sm rounded-b-[3.4rem]"
+          className="relative bg-[#2f62c7]/90 -mt-[96px] pt-[86px] md:pt-[96px] pb-20 overflow-hidden px-1 xs:px-3 sm:px-6 shadow-sm rounded-b-[3.4rem]"
         >
           <div className="relative max-w-[1320px] mx-auto w-full h-full px-3 z-10">
             <Breadcrumbs
@@ -88,7 +88,7 @@ const ToolboxIndexPage = ({
 {/* {title} */}
 
 
-      <Container maxWidth="max-w-[1320px] grid grid-cols-12">
+      <Container padding={false} maxWidth="max-w-[1320px] px-6 mx-auto xl:px-3 grid grid-cols-12">
 
       <Sidebar
           title={title}
@@ -97,7 +97,7 @@ const ToolboxIndexPage = ({
           filterCategories={filterCategories}
           slug={currentSlug}
         />
-        <div className={`w-full px-0 ${title!=='All tools'?'-mt-20':''} pl-0 md:pl-8 mx-auto pb-20 gap-2 col-span-12 md:col-span-10 pb-10`}>
+        <div className={`w-full px-0 ${(title=='All tools' && pagination?.page==1)?'':'-mt-28 lg:-mt-20'} pl-0 md:pl-8 mx-auto pb-20 gap-2 col-span-12 md:col-span-10 pb-10`}>
           {router.isFallback ? (
             <PostTitle>Loading…</PostTitle>
           ) : (

diff --git a/components/v4/card/SmallCard/MediumPost.js b/components/v4/card/SmallCard/MediumPost.js
@@ -8,7 +8,7 @@ const MediumPost = ({link, title, image, tags, date, avatar, author }) => {
   return (
     <div className="flex h-full sm:mt-0 flex-col hover:bg-white transition transition-all duration-300 p-4 bg-white shadow-md rounded-2xl font-inter w-full">
       {image ? (
-        <div className="w-full shrink-0 h-[180px] max-w-full sm:max-w-[190px] md:h-[240px] md:max-w-full relative rounded-2xl overflow-hidden border border-gray-100">
+        <div className="w-full shrink-0 h-[180px] max-w-full md:h-[240px] md:max-w-full relative rounded-2xl overflow-hidden border border-gray-100">
           <Link href={link??''}>
             <Image
               className="object-cover cursor-pointer"

diff --git a/components/v4/layout/PostsGroup3Cards.js b/components/v4/layout/PostsGroup3Cards.js
@@ -6,7 +6,7 @@ const dummyAvatar = 'https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototy
 const PostsGroup3Cards = ({posts}) =>{
 
     return(
-        <div className="grid grid-cols-3 gap-8 w-full">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
 {/* <SingleFancyCard/> */}
             {/* <PrototyprNetworkCTA2 /> */}
         {posts?.length ? (

diff --git a/components/v4/section/NewsletterSection.js b/components/v4/section/NewsletterSection.js
@@ -5,7 +5,7 @@ const NewsletterSection = ({title,padding}) =>{
 
     return(
         <Container padding={padding} maxWidth="max-w-[1320px]">
-            <div className=" sm:mt-8 lg:px-0 lg:mt-0">
+            <div className="mt-8 lg:px-0 lg:mt-0">
             <div
             className="w-full shadow-md relative flex h-full bg-gray-100 w-full lg:mt-8 rounded-3xl p-6"
             >

diff --git a/pages/index.js b/pages/index.js
@@ -117,9 +117,9 @@ export default function Index({
             <TagsNavRow/>
           </div>
                 {/* <SectionDivider py='py-9' transparentLine={true} /> */}
-        <div className="z-50 relative pt-[40px]">
+        <div className="z-50 relative pt-[40px] px-3">
           <div className="text-xs font-medium mb-2 text-center text-gray-500/90 uppercase">Prototypr Toolbox</div>
-          <h2 className="text-3xl font-bold mb-[42px] text-center text-gray-800">Tools to shape <span className="text-underline">every idea</span></h2>
+          <h2 className="text-3xl font-bold mb-[42px] text-center text-gray-800">Tools to shape <span className="text-underline inline-block md:inline">every idea</span></h2>
             <div className="pb-3">
               <MotionSlider
                   duration={50}
@@ -253,7 +253,7 @@ export default function Index({
               Browse by <span className="text-underline">category</span>
               </h3>
               <div className="flex relative p-2 mb-1">
-            <div className="text-md inline text-blue-800 font-normal font-inter">
+            <div className="hidden sm:inline text-md text-blue-800 font-normal font-inter">
             <Link href={`/topics/`}>See all</Link>
             </div>
             <div className="my-auto">