mirror of
https://github.com/formbricks/formbricks.git
synced 2026-01-07 08:50:25 -06:00
Fix overlapping card content on the website using tailwind based approach
This commit is contained in:
@@ -84,11 +84,11 @@ export default function BestPracticeNavigation() {
|
||||
<div className="mx-auto grid grid-cols-1 gap-6 px-2 sm:grid-cols-3">
|
||||
{BestPractices.map((bestPractice) => (
|
||||
<Link href={bestPractice.href} key={bestPractice.name}>
|
||||
<div className="drop-shadow-card duration-120 hover:border-brand-dark break640:p-4 relative rounded-lg border border-slate-100 bg-slate-100 p-8 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800">
|
||||
<div className="drop-shadow-card duration-120 hover:border-brand-dark relative rounded-lg border border-slate-100 bg-slate-100 p-6 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800">
|
||||
<div
|
||||
className={clsx(
|
||||
// base styles independent what type of button it is
|
||||
"break640:text-3xs break640:right-3 absolute right-7 rounded-full px-3 py-1",
|
||||
"text-3xs absolute right-6 rounded-full px-3 py-1",
|
||||
// different styles depending on type
|
||||
bestPractice.category === "Boost Retention" &&
|
||||
"bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",
|
||||
|
||||
@@ -69,7 +69,6 @@ export default {
|
||||
},
|
||||
screens: {
|
||||
xs: "430px",
|
||||
break640: { min: "640px", max: "950px" },
|
||||
},
|
||||
opacity: {
|
||||
1: "0.01",
|
||||
|
||||
Reference in New Issue
Block a user