mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-05-01 19:32:57 -05:00
Code Issues Packages Projects Releases 100 Wiki Activity

Fix/Card overlapping issue #1001

Browse Source
This commit is contained in:
Abhinav Arya
2023-10-08 07:07:42 +00:00
parent 5426e400c9
commit fbc16b3a72
2 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css
+14
View File
@@ -0,0 +1,14 @@
@media screen and (max-width:960px) and (min-width:831px){
.category{
font-size: 12px;
}
}
@media screen and (max-width:830px) and (min-width:640px) {
.heroCard{
padding: 1rem;
}
.category{
font-size: 10px;
right: 10px;
}
}
apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
+7 -3
View File
@@ -11,6 +11,9 @@ import {
import clsx from "clsx";
import Link from "next/link";
// Importing custom CSS file for BestPracticeNavigation.tsx File.
import style from "../customeStyles/BestPracticeNavigation.module.css";
export default function BestPracticeNavigation() {
const BestPractices = [
{
@@ -81,14 +84,15 @@ export default function BestPracticeNavigation() {
];
return (
<div className=" mx-auto grid grid-cols-1 gap-6 px-2 sm:grid-cols-3">
<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 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-8 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800 ${style.heroCard}`}>
<div
className={clsx(
// base styles independent what type of button it is
"absolute right-10 rounded-full px-3 py-1",
`absolute right-10 rounded-full px-3 py-1 ${style.category}`,
// different styles depending on type
bestPractice.category === "Boost Retention" &&
"bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",