mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-08 16:21:09 -06:00
Code Issues Packages Projects Releases 118 Wiki Activity

Fix overlapping card content on the website using tailwind based approach

Browse Source
This commit is contained in:
Abhinav Arya
2023-10-08 09:54:32 +00:00
parent fbc16b3a72
commit eca90dfd9a
4 changed files with 5 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/demo/.env.example
View File

@@ -1,5 +1,5 @@
NEXT_PUBLIC_FORMBRICKS_API_HOST=http://localhost:3000
NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=YOUR_ENVIRONMENT_ID
NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=https://formbricks-formbricks-m4jive9c4tg.ws-us105.gitpod.io/
# Copy the environment ID for the URL of your Formbricks App and
# paste it above to connect your Formbricks App with the Demo App.

14
apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css
View File

@@ -1,14 +0,0 @@
@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;
}
}

8
apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
View File

@@ -11,9 +11,6 @@ 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 = [
{
@@ -87,12 +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 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="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={clsx(
// base styles independent what type of button it is
`absolute right-10 rounded-full px-3 py-1 ${style.category}`,
"break640:text-3xs break640:right-3 absolute right-7 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",

2
apps/formbricks-com/tailwind.config.ts
View File

@@ -20,6 +20,7 @@ export default {
darkMode: "class",
theme: {
fontSize: {
"3xs": ["0.65rem", { lineHeight: "1.25rem" }],
"2xs": ["0.75rem", { lineHeight: "1.25rem" }],
xs: ["0.75rem", { lineHeight: "1rem" }],
sm: ["0.875rem", { lineHeight: "1.5rem" }],
@@ -68,6 +69,7 @@ export default {
},
screens: {
xs: "430px",
break640: { min: "640px", max: "950px" },
},
opacity: {
1: "0.01",