diff --git a/web/src/components/InfoCard.tsx b/web/src/components/InfoCard.tsx
index ab1525f9..6dbd480d 100644
--- a/web/src/components/InfoCard.tsx
+++ b/web/src/components/InfoCard.tsx
@@ -1,7 +1,6 @@
+import clsx from "clsx";
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import InfoCircle from "svgs/icons/info-circle.svg";
-import { cn } from "src/utils";
 
 interface IInfoCard {
   msg: string;
@@ -11,12 +10,11 @@ interface IInfoCard {
 const InfoCard: React.FC<IInfoCard> = ({ msg, className }) => {
   return (
     <div
-      className={cn(
-        "grid grid-cols-[16px_auto] items-center justify-start",
+      className={clsx(
+        "grid grid-cols-[16px_auto] gap-fluid-6-8-300 items-center justify-start",
         "text-start text-klerosUIComponentsSecondaryText",
         className
       )}
-      style={{ gap: responsiveSize(6, 8, 300) }}
     >
       <InfoCircle />
       {msg}
diff --git a/web/src/components/InformationCards/ItemInformationCard/index.tsx b/web/src/components/InformationCards/ItemInformationCard/index.tsx
index 49341e66..84ea2da1 100644
--- a/web/src/components/InformationCards/ItemInformationCard/index.tsx
+++ b/web/src/components/InformationCards/ItemInformationCard/index.tsx
@@ -4,7 +4,6 @@ import Skeleton from "react-loading-skeleton";
 import AliasDisplay from "components/RegistryInfo/AliasDisplay";
 import ActionButton from "components/ActionButton";
 import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
-import { responsiveSize } from "styles/responsiveSize";
 import { Policies } from "../RegistryInformationCard/Policies";
 import FieldsDisplay from "./FieldsDisplay";
 import StatusDisplay from "../StatusDisplay";
@@ -61,10 +60,7 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
           <StatusDisplay {...{ status, disputed, registryAddress, latestRequestSubmissionTime }} />
         </div>
       </div>
-      <hr
-        className="border-none h-px bg-klerosUIComponentsStroke mx-8"
-        style={{ marginBlock: responsiveSize(20, 28) }}
-      />
+      <hr className="border-none h-px bg-klerosUIComponentsStroke mx-8 my-fluid-20-28" />
       <div className="flex px-8 pb-3 flex-wrap gap-3 justify-between">
         {registerer?.id ? (
           <div className={aliasContainerStyle}>
diff --git a/web/src/components/InformationCards/RegistryInformationCard/Policies.tsx b/web/src/components/InformationCards/RegistryInformationCard/Policies.tsx
index 0f9f3d5b..fe298d42 100644
--- a/web/src/components/InformationCards/RegistryInformationCard/Policies.tsx
+++ b/web/src/components/InformationCards/RegistryInformationCard/Policies.tsx
@@ -1,7 +1,5 @@
 import React from "react";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import Skeleton from "react-loading-skeleton";
 
 import PolicyIcon from "svgs/icons/policy.svg";
@@ -26,14 +24,13 @@ export const Policies: React.FC<IPolicies> = ({ policyURI, isItem }) => {
     <div
       className={clsx(
         "flex flex-col justify-center lg:flex-row lg:justify-between",
-        "w-full py-6 mt-4 bg-klerosUIComponentsMediumBlue leading-6"
+        "w-full py-6 px-fluid-24-32 mt-4 bg-klerosUIComponentsMediumBlue leading-6"
       )}
-      style={{ paddingInline: responsiveSize(24, 32) }}
     >
       <p className="text-sm leading-6 text-klerosUIComponentsPrimaryBlue mb-4 lg:mb-0">
         Make sure you read and understand the Policies
       </p>
-      <div className="flex flex-wrap" style={{ gap: responsiveSize(16, 24) }}>
+      <div className="flex flex-wrap gap-fluid-16-24">
         {!isItem ? (
           <>
             {parentRegistryDetails ? (
diff --git a/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx b/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx
index 2b6d2d5d..f55f78a0 100644
--- a/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx
+++ b/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx
@@ -4,14 +4,13 @@ import Skeleton from "react-loading-skeleton";
 import { RegistryDetails } from "context/RegistryDetailsContext";
 import StatusDisplay from "../StatusDisplay";
 import { DEFAULT_CHAIN, SUPPORTED_CHAINS } from "src/consts/chains";
-import { responsiveSize } from "src/styles/responsiveSize";
-import { cn, isUndefined } from "src/utils";
+import { isUndefined } from "src/utils";
 import { DEFAULT_LIST_LOGO } from "src/consts";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
 import { Link } from "react-router-dom";
+import clsx from "clsx";
 
-const landscapeColumnGapCalc = "lg:gap-x-[calc(24px+(32-24)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
 interface ITopInfo
   extends Pick<
     RegistryDetails,
@@ -33,11 +32,8 @@ const TopInfo: React.FC<ITopInfo> = ({
   const [imageSrc, setImageSrc] = useState(getIpfsUrl(logoURI ?? ""));
   useEffect(() => setImageSrc(getIpfsUrl(logoURI ?? "")), [logoURI]);
   return (
-    <div
-      className="flex flex-wrap justify-between gap-3 lg:flex-nowrap pb-3"
-      style={{ paddingTop: responsiveSize(20, 24), paddingInline: responsiveSize(24, 32) }}
-    >
-      <div className="flex flex-col" style={{ rowGap: responsiveSize(8, 16) }}>
+    <div className="flex flex-wrap justify-between gap-3 lg:flex-nowrap pb-3 pt-fluid-20-24 px-fluid-24-32">
+      <div className="flex flex-col gap-y-fluid-8-16">
         <div className="flex flex-wrap items-center gap-4">
           {isUndefined(logoURI) ? (
             <Skeleton width={125} height={125} borderRadius="62.5px" className="mb-2" />
@@ -60,10 +56,9 @@ const TopInfo: React.FC<ITopInfo> = ({
         )}
       </div>
       <div
-        className={cn(
+        className={clsx(
           "flex flex-row flex-wrap shrink gap-8 items-start pt-5",
-          "lg:shrink-0 lg:gap-y-0",
-          landscapeColumnGapCalc
+          "lg:shrink-0 lg:gap-x-fluid-24-32-900 lg:gap-y-0"
         )}
       >
         {id !== "" ? (
diff --git a/web/src/components/InformationCards/RegistryInformationCard/index.tsx b/web/src/components/InformationCards/RegistryInformationCard/index.tsx
index 38f7c1e6..013cb3ba 100644
--- a/web/src/components/InformationCards/RegistryInformationCard/index.tsx
+++ b/web/src/components/InformationCards/RegistryInformationCard/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import { Card, Copiable } from "@kleros/ui-components-library";
 import AliasDisplay from "components/RegistryInfo/AliasDisplay";
 import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
@@ -71,11 +70,8 @@ const RegistryInformationCard: React.FC<IInformationCard> = ({
           registryAddress: parentRegistryAddress,
         }}
       />
-      <hr
-        className="border-none h-px bg-klerosUIComponentsStroke"
-        style={{ marginBlock: responsiveSize(20, 28), marginInline: responsiveSize(24, 32) }}
-      />
-      <div className="flex flex-wrap justify-between gap-5 pb-3" style={{ paddingInline: responsiveSize(24, 32) }}>
+      <hr className="border-none h-px bg-klerosUIComponentsStroke my-fluid-20-28 mx-fluid-24-32" />
+      <div className="flex flex-wrap justify-between gap-5 pb-3 px-fluid-24-32">
         <div className="flex flex-wrap gap-2 items-center leading-18px">
           <small className="text-sm font-semibold leading-18px text-klerosUIComponentsPrimaryText">Submitted by:</small>
           <Copiable copiableContent={registerer?.id ?? ""} tooltipProps={{ small: true }}>
diff --git a/web/src/components/ItemCard/index.tsx b/web/src/components/ItemCard/index.tsx
index 1aa13682..e0bc4347 100644
--- a/web/src/components/ItemCard/index.tsx
+++ b/web/src/components/ItemCard/index.tsx
@@ -1,17 +1,13 @@
 import React from "react";
 import { Button, Card } from "@kleros/ui-components-library";
 import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
-import { responsiveSize } from "styles/responsiveSize";
 import StatusBanner, { mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
 import ArrowIcon from "svgs/icons/arrow.svg";
 import { ItemDetailsFragment } from "src/graphql/graphql";
 import ItemField from "./ItemField";
-import { cn } from "src/utils";
 import clsx from "clsx";
 
-const landscapeGridColsCalc =
-  "lg:grid-cols-[1fr_calc(150px+(180-150)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]";
-const landscapeGapCalc = "lg:gap-[calc(16px+(36-16)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
+const landscapeGridColsCalc = "lg:grid-cols-[1fr_var(--spacing-fluid-150-180-900)_max-content]";
 
 interface IItemCard extends ItemDetailsFragment {}
 
@@ -28,19 +24,17 @@ const ItemCard: React.FC<IItemCard> = ({ id, status, disputed, props }) => {
       onClick={() => navigateAndScrollTop(`/lists/item/${id?.toString()}`)}
     >
       <div
-        className={cn(
+        className={clsx(
           "grid grid-rows-[repeat(3,min-content)] grid-cols-[1fr_min-content]",
-          "w-full h-max p-4 gap-y-2 items-center",
+          "w-full h-max p-4 gap-y-2 gap-x-fluid-12-32-900 items-center",
           "lg:h-16 lg:justify-between lg:grid-rows-[1fr] lg:py-0 lg:px-8",
           landscapeGridColsCalc
         )}
-        style={{ columnGap: responsiveSize(12, 32, 900) }}
       >
         <div
-          className={cn(
+          className={clsx(
             "flex flex-col justify-between items-start gap-4 w-fit col-span-2",
-            "lg:flex-row lg:items-center lg:col-span-1",
-            landscapeGapCalc
+            "lg:flex-row lg:items-center lg:col-span-1 lg:gap-fluid-16-36-900"
           )}
         >
           {sortedProps.map((prop) => prop.isIdentifier && <ItemField key={prop.label} {...prop} />)}
diff --git a/web/src/components/RegistryCard/RegistryInfo.tsx b/web/src/components/RegistryCard/RegistryInfo.tsx
index 2df62fad..3e27de44 100644
--- a/web/src/components/RegistryCard/RegistryInfo.tsx
+++ b/web/src/components/RegistryCard/RegistryInfo.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import Skeleton from "react-loading-skeleton";
 import { Button } from "@kleros/ui-components-library";
 import ArrowIcon from "svgs/icons/arrow.svg";
@@ -19,7 +18,7 @@ interface IListInfo {
 }
 
 const landscapeGridColsCalc =
-  "lg:grid-cols-[auto_1fr_calc(80px+(100-80)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_calc(100px+(150-100)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]";
+  "lg:grid-cols-[auto_1fr_var(--spacing-fluid-80-100-900)_var(--spacing-fluid-100-150-900)_max-content]";
 
 const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isListView = false }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
@@ -35,7 +34,7 @@ const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isL
       className={cn(
         "flex flex-col justify-center items-center gap-2 h-[calc(100%-45px)]",
         isListView && [
-          "grid grid-cols-[21px_max-content_1fr_max-content] grid-rows-[repeat(3,min-content)] gap-y-4",
+          "grid grid-cols-[21px_max-content_1fr_max-content] grid-rows-[repeat(3,min-content)] gap-y-4 gap-x-fluid-8-24-900",
           "w-full h-max lg:h-16 p-4",
           "[&_img]:col-span-4",
           "lg:justify-between lg:grid-rows-[1fr] lg:px-8 lg:py-0",
@@ -43,7 +42,6 @@ const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isL
           landscapeGridColsCalc,
         ]
       )}
-      style={{ columnGap: isListView ? responsiveSize(8, 24, 900) : undefined }}
     >
       {!imageLoaded ? (
         <Skeleton
diff --git a/web/src/components/StatDisplay.tsx b/web/src/components/StatDisplay.tsx
index fb1379da..415070db 100644
--- a/web/src/components/StatDisplay.tsx
+++ b/web/src/components/StatDisplay.tsx
@@ -10,11 +10,9 @@ interface IStatDisplay {
   color: IColors;
 }
 
-const landscapeMarginBottomCalc = "lg:mb-[calc(16px+(30-16)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
-
 const StatDisplay: React.FC<IStatDisplay> = ({ title, text, subtext, icon: Icon, color, ...props }) => {
   return (
-    <div className={cn("flex items-center gap-2 max-w-[192px]", landscapeMarginBottomCalc)} {...props}>
+    <div className="flex items-center gap-2 max-w-[192px] lg:mb-fluid-16-30" {...props}>
       <div
         className={cn(
           "flex items-center justify-center h-12 w-12 rounded-[50%]",
diff --git a/web/src/components/StyledSkeleton.tsx b/web/src/components/StyledSkeleton.tsx
index 75e58cad..d3b85aad 100644
--- a/web/src/components/StyledSkeleton.tsx
+++ b/web/src/components/StyledSkeleton.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import Skeleton from "react-loading-skeleton";
-import { responsiveSize } from "styles/responsiveSize";
 
 export const HistorySkeletonCard = () => (
   <div className="flex flex-col gap-2">
@@ -11,17 +10,13 @@ export const HistorySkeletonCard = () => (
   </div>
 );
 
-export const SkeletonRegistryCard = () => (
-  <div className="w-full">
-    <Skeleton height={responsiveSize(270, 296)} />
-  </div>
-);
+export const SkeletonRegistryCard = () => <Skeleton className="w-full h-fluid-270-296" />;
 
 export const SkeletonJustificationCard = () => (
   <div className="flex flex-col gap-4 w-full">
-    <Skeleton className="ml-auto" height={24} width={responsiveSize(100, 160)} />
+    <Skeleton className="ml-auto w-fluid-100-160" height={24} />
     <Skeleton height={60} />
-    <Skeleton height={24} width={responsiveSize(60, 80)} />
+    <Skeleton className="w-fluid-60-80" height={24} />
   </div>
 );
 
diff --git a/web/src/global.css b/web/src/global.css
index 0b49e432..dd81383b 100644
--- a/web/src/global.css
+++ b/web/src/global.css
@@ -24,6 +24,61 @@
   --max-width-landscape: 87.5rem;
   --shadow-custom: 0px 2px 3px rgba(0, 0, 0, 0.06);
   --leading-18px: 18px;
+
+  /* 
+  * Spacing utils for custom sizing
+  * Default max screen width is 1250px
+  * Default min screen width is 375px
+  */
+  --spacing-scale-8-32-300: calc(8px + (32 - 8) * (100vw - 300px) / (1250 - 300));
+  --spacing-scale-300-424-300: calc(300px + (424 - 300) * (100vw - 300px) / (1250 - 300));
+
+  /* 
+  * Spacing utils for responsive resizing
+  * Default max screen width is 1250px
+  * Default min screen width is 375px
+  */
+  --spacing-fluid-0-16: clamp(0px, calc(0px + (16 - 0) * (100vw - 375px) / (1250 - 375)), 16px);
+  --spacing-fluid-0-108: clamp(0px, calc(0px + (108 - 0) * (100vw - 375px) / (1250 - 375)), 108px);
+  --spacing-fluid-0-132: clamp(0px, calc(0px + (132 - 0) * (100vw - 375px) / (1250 - 375)), 132px);
+  --spacing-fluid-4-8: clamp(4px, calc(4px + (8 - 4) * (100vw - 375px) / (1250 - 375)), 8px);
+  --spacing-fluid-6-8-300: clamp(6px, calc(6px + (8 - 6) * (100vw - 300px) / (1250 - 300)), 8px);
+  --spacing-fluid-8-16: clamp(8px, calc(8px + (16 - 8) * (100vw - 375px) / (1250 - 375)), 16px);
+  --spacing-fluid-8-24: clamp(8px, calc(8px + (24 - 8) * (100vw - 375px) / (1250 - 375)), 24px);
+  --spacing-fluid-8-24-900: clamp(8px, calc(8px + (24 - 8) * (100vw - 900px) / (1250 - 900)), 24px);
+  --spacing-fluid-8-32-300: clamp(8px, calc(8px + (32 - 8) * (100vw - 300px) / (1250 - 300)), 32px);
+  --spacing-fluid-10-130: clamp(10px, calc(10px + (130 - 10) * (100vw - 375px) / (1250 - 375)), 130px);
+  --spacing-fluid-12-32-300: clamp(12px, calc(12px + (32 - 12) * (100vw - 300px) / (1250 - 300)), 32px);
+  --spacing-fluid-12-32-900: clamp(12px, calc(12px + (32 - 12) * (100vw - 900px) / (1250 - 900)), 32px);
+  --spacing-fluid-16-24: clamp(16px, calc(16px + (24 - 16) * (100vw - 375px) / (1250 - 375)), 24px);
+  --spacing-fluid-16-30: clamp(16px, calc(16px + (30 - 16) * (100vw - 375px) / (1250 - 375)), 30px);
+  --spacing-fluid-16-36-900: clamp(16px, calc(16px + (36 - 16) * (100vw - 900px) / (1250 - 900)), 36px);
+  --spacing-fluid-16-54: clamp(16px, calc(16px + (54 - 16) * (100vw - 375px) / (1250 - 375)), 54px);
+  --spacing-fluid-20-24: clamp(20px, calc(20px + (24 - 20) * (100vw - 375px) / (1250 - 375)), 24px);
+  --spacing-fluid-20-28: clamp(20px, calc(20px + (28 - 20) * (100vw - 375px) / (1250 - 375)), 28px);
+  --spacing-fluid-24-28: clamp(24px, calc(24px + (28 - 24) * (100vw - 375px) / (1250 - 375)), 28px);
+  --spacing-fluid-24-32: clamp(24px, calc(24px + (32 - 24) * (100vw - 375px) / (1250 - 375)), 32px);
+  --spacing-fluid-24-48: clamp(24px, calc(24px + (48 - 24) * (100vw - 375px) / (1250 - 375)), 48px);
+  --spacing-fluid-24-32-900: clamp(24px, calc(24px + (32 - 24) * (100vw - 900px) / (1250 - 900)), 32px);
+  --spacing-fluid-24-136: clamp(24px, calc(24px + (136 - 24) * (100vw - 375px) / (1250 - 375)), 136px);
+  --spacing-fluid-25-65: clamp(25px, calc(25px + (65 - 25) * (100vw - 375px) / (1250 - 375)), 65px);
+  --spacing-fluid-32-24: clamp(24px, calc(32px + (24 - 32) * (100vw - 375px) / (1250 - 375)), 32px);
+  --spacing-fluid-32-80: clamp(32px, calc(32px + (80 - 32) * (100vw - 375px) / (1250 - 375)), 80px);
+  --spacing-fluid-60-80: clamp(60px, calc(60px + (80 - 60) * (100vw - 375px) / (1250 - 375)), 80px);
+  --spacing-fluid-68-40: clamp(40px, calc(68px + (40 - 68) * (100vw - 375px) / (1250 - 375)), 68px);
+  --spacing-fluid-76-96: clamp(76px, calc(76px + (96 - 76) * (100vw - 375px) / (1250 - 375)), 96px);
+  --spacing-fluid-80-100-900: clamp(80px, calc(80px + (100 - 80) * (100vw - 900px) / (1250 - 900)), 100px);
+  --spacing-fluid-100-130: clamp(100px, calc(100px + (130 - 100) * (100vw - 375px) / (1250 - 375)), 130px);
+  --spacing-fluid-100-150-900: clamp(100px, calc(100px + (150 - 100) * (100vw - 900px) / (1250 - 900)), 150px);
+  --spacing-fluid-100-160: clamp(100px, calc(100px + (160 - 100) * (100vw - 375px) / (1250 - 375)), 160px);
+  --spacing-fluid-150-72: clamp(72px, calc(150px + (72 - 150) * (100vw - 375px) / (1250 - 375)), 150px);
+  --spacing-fluid-150-180-900: clamp(150px, calc(150px + (180 - 150) * (100vw - 900px) / (1250 - 900)), 180px);
+  --spacing-fluid-200-720: clamp(200px, calc(200px + (720 - 200) * (100vw - 375px) / (1250 - 375)), 720px);
+  --spacing-fluid-270-296: clamp(270px, calc(270px + (296 - 270) * (100vw - 375px) / (1250 - 375)), 296px);
+  --spacing-fluid-300-480: clamp(300px, calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)), 480px);
+  --spacing-fluid-300-424-300: clamp(300px, calc(300px + (424 - 300) * (100vw - 300px) / (1250 - 300)), 424px);
+  --spacing-fluid-342-618: clamp(342px, calc(342px + (618 - 342) * (100vw - 375px) / (1250 - 375)), 618px);
+  --spacing-fluid-442-700-900: clamp(442px, calc(442px + (700 - 442) * (100vw - 900px) / (1250 - 900)), 700px);
 }
 
 .dark {
diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx
index f62a409a..b22c373c 100644
--- a/web/src/layout/Header/DesktopHeader.tsx
+++ b/web/src/layout/Header/DesktopHeader.tsx
@@ -8,8 +8,6 @@ import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
 import { DEFAULT_CHAIN } from "consts/chains";
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
 import OverlayPortal from "components/OverlayPortal";
@@ -44,7 +42,7 @@ const DesktopHeader: React.FC = () => {
           <Explore />
         </div>
 
-        <div className="flex ml-2 [&_canvas]:w-5" style={{ gap: responsiveSize(4, 8) }}>
+        <div className="flex gap-fluid-4-8 ml-2 [&_canvas]:w-5">
           <div
             className="[&_label]:cursor-pointer [&_label]:text-white/80"
             onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}
diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx
index 46dcbe94..d056b05a 100644
--- a/web/src/layout/Header/navbar/DappList.tsx
+++ b/web/src/layout/Header/navbar/DappList.tsx
@@ -10,8 +10,6 @@ import Court from "svgs/icons/kleros.svg";
 import POH from "svgs/icons/poh-image.png";
 import Vea from "svgs/icons/vea.svg";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import Product from "./Product";
 import clsx from "clsx";
 
@@ -82,8 +80,6 @@ interface IDappList {
   toggleIsDappListOpen: () => void;
 }
 
-const landscapeWidthCalc = "lg:w-[calc(300px+(480-300)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
-
 const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
   const containerRef = useRef(null);
   useClickAway(containerRef, () => toggleIsDappListOpen());
@@ -97,17 +93,16 @@ const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
         "border border-klerosUIComponentsStroke rounded-[3px]",
         "bg-klerosUIComponentsWhiteBackground shadow-custom",
         "[&_svg]:visible",
-        "lg:mt-16 lg:top-0 lg:left-0 lg:right-auto lg:transform-none lg:translate-x-0 lg:max-h-[80vh]",
-        landscapeWidthCalc
+        "lg:w-fluid-300-480 lg:mt-16 lg:top-0 lg:left-0 lg:right-auto lg:transform-none lg:translate-x-0 lg:max-h-[80vh]"
       )}
     >
       <h1 className="pt-6 mb-4">Kleros Solutions</h1>
       <div
         className={clsx(
           "grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))]",
-          "overflow-y-auto gap-y-2 gap-x-0.5 justify-items-center max-w-[480px] min-w-[300px]"
+          "overflow-y-auto gap-y-2 gap-x-0.5 justify-items-center w-fluid-300-480",
+          "pt-1 pb-4 px-fluid-8-24"
         )}
-        style={{ padding: `4px ${responsiveSize(8, 24)} 16px`, width: responsiveSize(300, 480) }}
       >
         {ITEMS.map((item) => {
           return <Product {...item} key={item.text} />;
diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
index df4bde52..f5efb5ee 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
@@ -6,8 +6,6 @@ import { Button } from "@kleros/ui-components-library";
 
 import { EMAIL_REGEX } from "consts/index";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import { ISettings } from "../../../../index";
 
 import EmailVerificationInfo from "./EmailVerificationInfo";
@@ -72,11 +70,7 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   };
 
   return (
-    <form
-      className="w-full relative flex flex-col py-0 pb-4 gap-4"
-      style={{ paddingInline: responsiveSize(12, 32, 300) }}
-      onSubmit={handleSubmit}
-    >
+    <form className="w-full relative flex flex-col gap-4 py-0 pb-4 px-fluid-12-32-300" onSubmit={handleSubmit}>
       {/* <FormContactContainer>
         <FormContact
           contactLabel="Telegram"
diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
index f066ae8f..3c530fd1 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
@@ -5,7 +5,7 @@ import General from "./General";
 import NotificationSettings from "./Notifications";
 import { ISettings } from "../../index";
 import { useLocation, useNavigate } from "react-router-dom";
-import { cn } from "src/utils";
+import clsx from "clsx";
 
 const TABS = [
   {
@@ -22,9 +22,6 @@ const TABS = [
   },
 ];
 
-const tabListInlinePaddingCalc = "[&>div:first-child]:px-[calc(8px+(32-8)*((100vw-300px)/(1250-300)))]";
-const landscapeWidthCalc = "lg:w-[calc(300px+(424-300)*((100vw-300px)/(1250-300)))]";
-
 const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   const containerRef = useRef(null);
   const location = useLocation();
@@ -37,7 +34,7 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   return (
     <div
       ref={containerRef}
-      className={cn(
+      className={clsx(
         "flex flex-col absolute max-h-[80vh] overflow-y-auto",
         "top-[5%] left-1/2 transform -translate-x-1/2 z-1 rounded-[3px]",
         "bg-klerosUIComponentsWhiteBackground border border-solid border-klerosUIComponentsStroke",
@@ -46,7 +43,7 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
     >
       <div className="flex justify-center text-2xl mt-6 text-klerosUIComponentsPrimaryText">Settings</div>
       <Tabs
-        className={cn("py-0 max-w-[660px] w-[86vw]", landscapeWidthCalc, tabListInlinePaddingCalc)}
+        className={clsx("py-0 max-w-[660px] w-[86vw] lg:w-scale-300-424-300", "[&>div:first-child]:px-scale-8-32-300")}
         items={[TABS[0], { ...TABS[1], content: <NotificationSettings {...{ toggleIsSettingsOpen }} /> }]}
       />
     </div>
diff --git a/web/src/layout/Header/navbar/Product.tsx b/web/src/layout/Header/navbar/Product.tsx
index 9f210ed5..a559f315 100644
--- a/web/src/layout/Header/navbar/Product.tsx
+++ b/web/src/layout/Header/navbar/Product.tsx
@@ -2,8 +2,6 @@ import clsx from "clsx";
 import React, { useState } from "react";
 import Skeleton from "react-loading-skeleton";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 interface IProduct {
   text: string;
   url: string;
@@ -19,11 +17,10 @@ const Product: React.FC<IProduct> = ({ text, url, Icon }) => {
       target="_blank"
       rel="noopener noreferrer"
       className={clsx(
-        "flex flex-col items-center pt-4 pb-7 px-2 max-w-[100px] rounded-[3px] gap-2",
+        "flex flex-col items-center pt-4 pb-7 px-2 max-w-[100px] w-fluid-100-130 rounded-[3px] gap-2",
         "cursor-pointer bg-klerosUIComponentsLightBackground hover:bg-light-grey dark:hover:bg-klerosUIComponentsLightGrey",
         "hover:transition-[transform_0.15s,background-color_0.3s] hover:scale-[1.02]"
       )}
-      style={{ width: responsiveSize(100, 130) }}
     >
       {typeof Icon === "string" ? (
         <>
diff --git a/web/src/pages/AllLists/index.tsx b/web/src/pages/AllLists/index.tsx
index fa97a59f..85187839 100644
--- a/web/src/pages/AllLists/index.tsx
+++ b/web/src/pages/AllLists/index.tsx
@@ -10,7 +10,7 @@ import ItemDisplay from "./ItemDisplay";
 import Breadcrumb from "./StyledBreadcrumb";
 import clsx from "clsx";
 
-const landscapePaddingCalc = "lg:p-[48px_calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))_60px]";
+const landscapePaddingCalc = "lg:p-[48px_var(--spacing-fluid-0-132)_60px]";
 
 const AllLists: React.FC = () => (
   <div
diff --git a/web/src/pages/AttachmentDisplay/Header.tsx b/web/src/pages/AttachmentDisplay/Header.tsx
index 9b8ebd78..922b1d6d 100644
--- a/web/src/pages/AttachmentDisplay/Header.tsx
+++ b/web/src/pages/AttachmentDisplay/Header.tsx
@@ -7,7 +7,6 @@ import { Button } from "@kleros/ui-components-library";
 import Arrow from "svgs/icons/arrow-left.svg";
 import PaperClip from "svgs/icons/paperclip.svg";
 
-import { responsiveSize } from "styles/responsiveSize";
 import clsx from "clsx";
 
 const Header: React.FC = () => {
@@ -20,12 +19,8 @@ const Header: React.FC = () => {
   return (
     <div className="flex justify-between items-center w-full mb-9">
       <div className="flex flex-row items-center gap-2">
-        <PaperClip
-          width={responsiveSize(16, 24)}
-          height={responsiveSize(16, 24)}
-          className="fill-klerosUIComponentsSecondaryPurple/69"
-        />
-        <h1 style={{ fontSize: responsiveSize(20, 24) }}>Attachment File</h1>{" "}
+        <PaperClip className="size-fluid-16-24 fill-klerosUIComponentsSecondaryPurple/69" />
+        <h1 className="text-(length:--spacing-fluid-20-24)">Attachment File</h1>{" "}
       </div>
       <Button
         className={clsx(
diff --git a/web/src/pages/AttachmentDisplay/index.tsx b/web/src/pages/AttachmentDisplay/index.tsx
index 23dd2c04..42d54e5d 100644
--- a/web/src/pages/AttachmentDisplay/index.tsx
+++ b/web/src/pages/AttachmentDisplay/index.tsx
@@ -6,25 +6,19 @@ import NewTabIcon from "svgs/icons/new-tab.svg";
 
 import Loader from "components/Loader";
 import Header from "./Header";
-import { cn } from "src/utils";
+import clsx from "clsx";
 
 const FileViewer = lazy(() => import("components/FileViewer"));
 
-const paddingCalc = "p-[calc(24px+(136-24)*(min(max(100vw,375px),1250px)-375px)/875)]";
-const paddingTopCalc = "pt-[calc(32px+(80-32)*(min(max(100vw,375px),1250px)-375px)/875)]";
-const paddingBottomCalc = "pb-[calc(76px+(96-76)*(min(max(100vw,375px),1250px)-375px)/875)]";
-
 const AttachmentDisplay: React.FC = () => {
   const [searchParams] = useSearchParams();
 
   const url = searchParams.get("url");
   return (
     <div
-      className={cn(
+      className={clsx(
         "w-full max-w-landscape my-0 mx-auto bg-klerosUIComponentsLightBackground",
-        paddingCalc,
-        paddingTopCalc,
-        paddingBottomCalc
+        "p-fluid-24-136 pt-fluid-32-80 pb-fluid-76-96"
       )}
     >
       <div className="flex flex-col gap-2 w-full">
diff --git a/web/src/pages/Home/Header.tsx b/web/src/pages/Home/Header.tsx
index c937ee84..74e924f7 100644
--- a/web/src/pages/Home/Header.tsx
+++ b/web/src/pages/Home/Header.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { responsiveSize } from "styles/responsiveSize";
 
 const Header: React.FC = () => {
   const [currentWordIndex, setCurrentWordIndex] = useState(0);
@@ -15,7 +14,7 @@ const Header: React.FC = () => {
 
   return (
     <div className="flex justify-between">
-      <h1 className="font-medium mb-12 tracking-[1px]" style={{ fontSize: responsiveSize(21, 24) }}>
+      <h1 className="text-(length:--spacing-fluid-20-24) font-medium mb-12 tracking-[1px]">
         Community Curated <span className="text-klerosUIComponentsSecondaryPurple">{words[currentWordIndex]}</span>
       </h1>
     </div>
diff --git a/web/src/pages/Home/Stats/index.tsx b/web/src/pages/Home/Stats/index.tsx
index bca8386c..b60997d4 100644
--- a/web/src/pages/Home/Stats/index.tsx
+++ b/web/src/pages/Home/Stats/index.tsx
@@ -5,7 +5,6 @@ import PaperIcon from "svgs/icons/paper.svg";
 import ListIcon from "svgs/icons/list.svg";
 import DollarIcon from "svgs/icons/dollar.svg";
 import JurorIcon from "svgs/icons/user.svg";
-import { responsiveSize } from "styles/responsiveSize";
 import { useCoinPrice } from "hooks/useCoinPrice";
 import { CoinIds } from "consts/coingecko";
 import { useCounter } from "hooks/queries/useCounter";
@@ -72,12 +71,9 @@ const Stats = () => {
     <Card
       className={clsx(
         "grid grid-cols-[repeat(auto-fit,minmax(190px,1fr))] gap-8",
-        "w-full h-fit mb-16 pb-4! lg:gap-0 lg:pb-0!"
+        "w-full h-fit mb-16 lg:gap-0",
+        "p-fluid-16-30 pl-fluid-16-54 pb-4! lg:pb-0!"
       )}
-      style={{
-        padding: responsiveSize(16, 30),
-        paddingLeft: responsiveSize(16, 54),
-      }}
     >
       {stats.map(({ title, coinId, text, subtext, color, icon }, i) => {
         return <StatDisplay key={i} {...{ title, color, icon, text, subtext }} />;
diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx
index c4ccf0bb..637313f1 100644
--- a/web/src/pages/Home/index.tsx
+++ b/web/src/pages/Home/index.tsx
@@ -6,8 +6,6 @@ import Header from "./Header";
 import Stats from "./Stats";
 import HighlightedLists from "./Highlights";
 
-const landscapeInlinePaddingCalc = "lg:px-[calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
-
 const Home: React.FC = () => {
   return (
     <>
@@ -15,7 +13,7 @@ const Home: React.FC = () => {
       <div
         className={clsx(
           "w-full max-w-landscape mx-auto bg-klerosUIComponentsLightBackground px-4 pt-4 pb-10",
-          `${landscapeInlinePaddingCalc} lg:pb-[60px]`
+          "lg:px-fluid-0-132 lg:pb-[60px]"
         )}
       >
         <Header />
diff --git a/web/src/pages/Settings/index.tsx b/web/src/pages/Settings/index.tsx
index 6ec2914d..47e7c6b0 100644
--- a/web/src/pages/Settings/index.tsx
+++ b/web/src/pages/Settings/index.tsx
@@ -1,17 +1,14 @@
 import React from "react";
 import { Route, Routes } from "react-router-dom";
 import EmailConfirmation from "./EmailConfirmation";
-import { cn } from "src/utils";
-
-const landscapePaddingInlineCalc = "lg:px-[calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
+import clsx from "clsx";
 
 const Settings: React.FC = () => {
   return (
     <div
-      className={cn(
+      className={clsx(
         "w-full max-w-landscape my-0 mx-auto pt-8 pb-10 px-4 bg-klerosUIComponentsLightBackground",
-        "lg:pt-12 lg:pb-16",
-        landscapePaddingInlineCalc
+        "lg:px-fluid-0-132 lg:pt-12 lg:pb-16"
       )}
     >
       <Routes>
diff --git a/web/src/pages/SubmitItem/Header/index.tsx b/web/src/pages/SubmitItem/Header/index.tsx
index 280f261b..a6c3bc81 100644
--- a/web/src/pages/SubmitItem/Header/index.tsx
+++ b/web/src/pages/SubmitItem/Header/index.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import { Card } from "@kleros/ui-components-library";
 import PileCoinsIcon from "svgs/icons/pile-coins.svg";
 import { useRegistryDetailsContext } from "context/RegistryDetailsContext";
@@ -42,8 +41,11 @@ const Header: React.FC<IHeader> = ({}) => {
   return (
     <div className="flex justify-center">
       <Card
-        className={clsx("flex flex-wrap justify-between gap-6", "h-auto w-[80vw] lg:w-[91vw]", "mt-[60px] py-6")}
-        style={{ marginBottom: responsiveSize(36, 36), paddingInline: responsiveSize(24, 32) }}
+        className={clsx(
+          "flex flex-wrap justify-between gap-6",
+          "h-auto w-[80vw] lg:w-[91vw]",
+          "mb-9 mt-[60px] py-6 px-fluid-24-32"
+        )}
       >
         <div className="flex flex-wrap gap-2">
           <p className="text-2xl font-semibold">Submit Item to</p>
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx
index f4a8dacc..c1b02b4b 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/AddressInput.tsx
@@ -2,9 +2,6 @@ import React, { useState } from "react";
 import { IFieldInput } from ".";
 import { isAddress } from "viem";
 import { TextField } from "@kleros/ui-components-library";
-import { responsiveSize } from "src/styles/responsiveSize";
-import { cn } from "src/utils";
-import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const AddressInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   const [address, setAddress] = useState(fieldProp.value ?? "");
@@ -25,8 +22,7 @@ const AddressInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   return (
     <TextField
       aria-label={fieldProp.description}
-      className={cn("w-[80vw]", LANDSCAPE_WIDTH_CALC)}
-      style={{ marginBottom: responsiveSize(68, 40) }}
+      className="w-[80vw] lg:w-fluid-200-720 mb-fluid-68-40"
       value={address}
       onChange={handleChange}
       variant={isError ? "error" : "info"}
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx
index d6a78ed4..a3cf7b9b 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx
@@ -3,9 +3,9 @@ import { IFieldInput } from ".";
 import { FileUploader } from "@kleros/ui-components-library";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
-import { cn, getFileUploaderMsg } from "src/utils";
+import { getFileUploaderMsg } from "src/utils";
 import useIsDesktop from "hooks/useIsDesktop";
-import { LANDSCAPE_WIDTH_CALC, MARGIN_BOTTOM_CALC } from "./constants";
+import clsx from "clsx";
 
 const FileInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   const { uploadFile, roleRestrictions } = useAtlasProvider();
@@ -27,11 +27,9 @@ const FileInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
 
   return (
     <FileUploader
-      className={cn(
-        "w-[84vw]",
-        "[&_small]:whitespace-pre-line [&_small]:text-start",
-        MARGIN_BOTTOM_CALC,
-        LANDSCAPE_WIDTH_CALC
+      className={clsx(
+        "w-[84vw] lg:w-fluid-200-720 mb-fluid-150-72",
+        "[&_small]:whitespace-pre-line [&_small]:text-start"
       )}
       callback={handleFileUpload}
       variant={isDesktop ? "info" : undefined}
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx
index 5f8712d7..ab7a59ff 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx
@@ -3,9 +3,9 @@ import { IFieldInput } from ".";
 import { FileUploader } from "@kleros/ui-components-library";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
-import { cn, getFileUploaderMsg } from "src/utils";
+import { getFileUploaderMsg } from "src/utils";
 import useIsDesktop from "hooks/useIsDesktop";
-import { LANDSCAPE_WIDTH_CALC, MARGIN_BOTTOM_CALC } from "./constants";
+import clsx from "clsx";
 
 const ImageInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   const { uploadFile, roleRestrictions } = useAtlasProvider();
@@ -28,11 +28,9 @@ const ImageInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
 
   return (
     <FileUploader
-      className={cn(
-        "w-[84vw]",
-        "[&_small]:whitespace-pre-line [&_small]:text-start",
-        MARGIN_BOTTOM_CALC,
-        LANDSCAPE_WIDTH_CALC
+      className={clsx(
+        "w-[84vw] lg:w-fluid-200-720 mb-fluid-150-72",
+        "[&_small]:whitespace-pre-line [&_small]:text-start"
       )}
       callback={handleFileUpload}
       variant={isDesktop ? "info" : undefined}
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx
index cb2c4c3d..c4094ea9 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/LinkInput.tsx
@@ -1,9 +1,6 @@
 import React, { useState } from "react";
 import { IFieldInput } from ".";
 import { TextField } from "@kleros/ui-components-library";
-import { cn } from "src/utils";
-import { responsiveSize } from "src/styles/responsiveSize";
-import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const LinkInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   const [link, setLink] = useState(fieldProp.value ?? "");
@@ -25,8 +22,7 @@ const LinkInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
     <TextField
       aria-label={fieldProp.description}
       value={link}
-      className={cn("w-[80vw]", LANDSCAPE_WIDTH_CALC)}
-      style={{ marginBottom: responsiveSize(68, 40) }}
+      className="w-[80vw] lg:w-fluid-200-720 mb-fluid-68-40"
       onChange={handleChange}
       variant={isError ? "error" : "info"}
       message={fieldProp.description}
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx
index ff1e5e2d..8a563944 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/LongTextInput.tsx
@@ -1,16 +1,12 @@
 import React from "react";
 import { IFieldInput } from ".";
 import { TextArea } from "@kleros/ui-components-library";
-import { responsiveSize } from "styles/responsiveSize";
-import { cn } from "src/utils";
-import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const LongTextInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   return (
     <TextArea
       aria-label={fieldProp.description}
-      className={cn("[&_textarea]:w-full custom-scrollbar", LANDSCAPE_WIDTH_CALC)}
-      style={{ marginBottom: responsiveSize(68, 40) }}
+      className="[&_textarea]:w-full custom-scrollbar lg:w-fluid-200-720 mb-fluid-68-40"
       resizeY
       value={fieldProp.value ?? ""}
       onChange={handleWrite}
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx
index 8c4ac0b3..40c703ab 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/NumberInput.tsx
@@ -1,9 +1,6 @@
 import React from "react";
 import { IFieldInput } from ".";
 import { NumberField } from "@kleros/ui-components-library";
-import { responsiveSize } from "src/styles/responsiveSize";
-import { cn } from "src/utils";
-import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const NumberInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   const handleChange = (value: number) => {
@@ -12,8 +9,7 @@ const NumberInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   return (
     <NumberField
       aria-label={fieldProp.description}
-      className={cn("w-[80vw]", LANDSCAPE_WIDTH_CALC)}
-      style={{ marginBottom: responsiveSize(68, 40) }}
+      className="w-[80vw] lg:w-fluid-200-720 mb-fluid-68-40"
       value={Number(fieldProp.value) ?? 0}
       onChange={handleChange}
       variant="info"
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx
index c9302f68..9419b6a7 100644
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx
+++ b/web/src/pages/SubmitItem/ItemField/FieldInput/TextInput.tsx
@@ -1,17 +1,13 @@
 import React from "react";
 import { IFieldInput } from ".";
 import { TextField } from "@kleros/ui-components-library";
-import { responsiveSize } from "src/styles/responsiveSize";
-import { cn } from "src/utils";
-import { LANDSCAPE_WIDTH_CALC } from "./constants";
 
 const TextInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
   return (
     <TextField
       aria-label={fieldProp.description}
       value={fieldProp.value ?? ""}
-      className={cn("w-[80vw]", LANDSCAPE_WIDTH_CALC)}
-      style={{ marginBottom: responsiveSize(68, 40) }}
+      className="w-[80vw] lg:w-fluid-200-720 mb-fluid-68-40"
       onChange={handleWrite}
       variant="info"
       message={fieldProp.description}
diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/constants.ts b/web/src/pages/SubmitItem/ItemField/FieldInput/constants.ts
deleted file mode 100644
index b75a0cec..00000000
--- a/web/src/pages/SubmitItem/ItemField/FieldInput/constants.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const LANDSCAPE_WIDTH_CALC = "lg:w-[calc(200px+(720-200)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
-export const MARGIN_BOTTOM_CALC = "mb-[calc(150px+(72-150)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
diff --git a/web/src/pages/SubmitItem/NavigationButtons/index.tsx b/web/src/pages/SubmitItem/NavigationButtons/index.tsx
index 0edc7c8c..0d59c6db 100644
--- a/web/src/pages/SubmitItem/NavigationButtons/index.tsx
+++ b/web/src/pages/SubmitItem/NavigationButtons/index.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import PreviousButton from "./PreviousButton";
 import NextButton from "./NextButton";
 import SubmitItemButton from "./SubmitItemButton";
+
 interface NavigationButtonsProps {
   prevRoute?: string;
   nextRoute?: string;
@@ -10,7 +10,7 @@ interface NavigationButtonsProps {
 
 const NavigationButtons: React.FC<NavigationButtonsProps> = ({ prevRoute, nextRoute }) => {
   return (
-    <div className="flex flex-wrap justify-center gap-6" style={{ marginTop: responsiveSize(32, 24) }}>
+    <div className="flex flex-wrap justify-center gap-6 mt-fluid-32-24">
       {prevRoute && <PreviousButton prevRoute={prevRoute} />}
       {prevRoute === "../policy" ? <SubmitItemButton /> : <NextButton nextRoute={nextRoute} />}
     </div>
diff --git a/web/src/pages/SubmitItem/Policy/Info.tsx b/web/src/pages/SubmitItem/Policy/Info.tsx
index 7b233613..11192562 100644
--- a/web/src/pages/SubmitItem/Policy/Info.tsx
+++ b/web/src/pages/SubmitItem/Policy/Info.tsx
@@ -1,8 +1,5 @@
 import React from "react";
 import { AlertMessage } from "@kleros/ui-components-library";
-import { cn } from "src/utils";
-
-const landscapeWitdhCalc = "lg:w-[calc(342px+(618-342)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
 
 const alertMessage =
   "The item must follow the Policy. Items that do not follow the policy risk" +
@@ -11,12 +8,7 @@ const alertMessage =
 
 const Info: React.FC = () => {
   return (
-    <AlertMessage
-      className={cn("w-[84vw] mb-8", landscapeWitdhCalc)}
-      variant="info"
-      title="Important"
-      msg={alertMessage}
-    />
+    <AlertMessage className="w-[84vw] mb-8 lg:w-fluid-342-618" variant="info" title="Important" msg={alertMessage} />
   );
 };
 
diff --git a/web/src/pages/SubmitItem/Preview/ItemDisplay.tsx b/web/src/pages/SubmitItem/Preview/ItemDisplay.tsx
index f4d7785f..b0e0159f 100644
--- a/web/src/pages/SubmitItem/Preview/ItemDisplay.tsx
+++ b/web/src/pages/SubmitItem/Preview/ItemDisplay.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import ItemCard from "components/ItemCard";
 import { useSubmitItemContext } from "context/SubmitItemContext";
 import { ItemDetailsFragment, Status } from "src/graphql/graphql";
@@ -19,7 +18,7 @@ const ItemDisplay: React.FC<IItemDisplay> = ({}) => {
   );
 
   return (
-    <div className="flex flex-col" style={{ gap: responsiveSize(32, 24) }}>
+    <div className="flex flex-col gap-fluid-32-24">
       <p className="text-klerosUIComponentsPrimaryBlue">Check how the item is displayed on the List page:</p>
       <ItemCard props={props} status={Status.RegistrationRequested} />
     </div>
diff --git a/web/src/pages/SubmitItem/Preview/ListDisplay.tsx b/web/src/pages/SubmitItem/Preview/ListDisplay.tsx
index b9b05eb0..521b46ba 100644
--- a/web/src/pages/SubmitItem/Preview/ListDisplay.tsx
+++ b/web/src/pages/SubmitItem/Preview/ListDisplay.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import ItemInformationCard from "components/InformationCards/ItemInformationCard";
 import { useSubmitItemContext } from "context/SubmitItemContext";
 import { ItemDetailsFragment, Status } from "src/graphql/graphql";
@@ -19,7 +18,7 @@ const ListDisplay: React.FC<IListDisplay> = ({}) => {
   );
 
   return (
-    <div className="flex flex-col" style={{ gap: responsiveSize(32, 24) }}>
+    <div className="flex flex-col gap-fluid-32-24">
       <p className="text-klerosUIComponentsPrimaryBlue">Check how the item is displayed on the Item page:</p>
       <ItemInformationCard
         props={props}
diff --git a/web/src/pages/SubmitItem/Preview/index.tsx b/web/src/pages/SubmitItem/Preview/index.tsx
index e6f01f25..92560d86 100644
--- a/web/src/pages/SubmitItem/Preview/index.tsx
+++ b/web/src/pages/SubmitItem/Preview/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import { Card } from "@kleros/ui-components-library";
 import NavigationButtons from "../NavigationButtons";
 import ListDisplay from "./ListDisplay";
@@ -8,18 +7,14 @@ import clsx from "clsx";
 
 const Preview: React.FC = () => {
   return (
-    <div className="flex flex-col items-center w-full py-0" style={{ paddingInline: responsiveSize(10, 130) }}>
+    <div className="flex flex-col items-center w-full py-0 px-fluid-10-130">
       <h2 className="text-2xl text-center font-semibold mb-8 w-[84vw] lg:w-auto">Preview</h2>
       <Card
         className={clsx(
           "relative flex flex-col gap-8 w-full h-auto min-h-[100px]",
-          "border-dashed border-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue"
+          "border-dashed border-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue",
+          "mb-fluid-0-16 py-fluid-24-48 px-fluid-24-32"
         )}
-        style={{
-          marginBottom: responsiveSize(0, 16),
-          paddingBlock: responsiveSize(24, 48),
-          paddingInline: responsiveSize(24, 32),
-        }}
       >
         <ListDisplay />
         <ItemDisplay />
diff --git a/web/src/pages/SubmitItem/index.tsx b/web/src/pages/SubmitItem/index.tsx
index b6142eca..464274c5 100644
--- a/web/src/pages/SubmitItem/index.tsx
+++ b/web/src/pages/SubmitItem/index.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { Navigate, Route, Routes, useLocation, useParams } from "react-router-dom";
-import { responsiveSize } from "styles/responsiveSize";
 import { useAccount } from "wagmi";
 import ConnectWallet from "components/ConnectWallet";
 import Timeline from "./Timeline";
@@ -36,12 +35,11 @@ const SubmitItem: React.FC = () => {
     <>
       {<Header />}
       <div
-        className={clsx("flex flex-col w-full max-w-landscape", "bg-klerosUIComponentsLightBackground my-0 mx-auto")}
-        style={{
-          paddingInline: responsiveSize(24, 32),
-          paddingTop: responsiveSize(24, 28),
-          paddingBottom: responsiveSize(76, 96),
-        }}
+        className={clsx(
+          "flex flex-col w-full max-w-landscape",
+          "bg-klerosUIComponentsLightBackground my-0 mx-auto",
+          "pt-fluid-24-28 pb-fluid-76-96 px-fluid-24-32"
+        )}
       >
         {isConnected ? (
           <EnsureAuth className="self-center">
diff --git a/web/src/pages/SubmitList/AdvancedParameters/index.tsx b/web/src/pages/SubmitList/AdvancedParameters/index.tsx
index 98dd7df7..c85b3089 100644
--- a/web/src/pages/SubmitList/AdvancedParameters/index.tsx
+++ b/web/src/pages/SubmitList/AdvancedParameters/index.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import NavigationButtons from "../NavigationButtons";
-import { responsiveSize } from "styles/responsiveSize";
 import Header from "../Header";
 import LightButton from "components/LightButton";
 import HistoryIcon from "svgs/icons/history.svg";
@@ -26,7 +25,7 @@ const AdvancedParameters: React.FC = () => {
     });
 
   return (
-    <div className="flex flex-col items-center gap-8 w-full py-0" style={{ paddingInline: responsiveSize(0, 108) }}>
+    <div className="flex flex-col items-center gap-8 w-full py-0 px-fluid-0-108">
       <Header text="Advanced Options" />
       <div className="flex flex-col w-full gap-4 mb-2.5">
         <label className="text-center w-full">
diff --git a/web/src/pages/SubmitList/DeployList/ListDetails.tsx b/web/src/pages/SubmitList/DeployList/ListDetails.tsx
index 36c46e2e..6ec8ebca 100644
--- a/web/src/pages/SubmitList/DeployList/ListDetails.tsx
+++ b/web/src/pages/SubmitList/DeployList/ListDetails.tsx
@@ -4,21 +4,17 @@ import { getChainIcon, getChainName } from "components/ChainIcon";
 import { ListProgress, useSubmitListContext } from "context/SubmitListContext";
 import { formatValue } from "utils/format";
 import Skeleton from "react-loading-skeleton";
-import { cn } from "src/utils";
 import clsx from "clsx";
 import { DEFAULT_CHAIN } from "src/consts/chains";
 
-const paddingCalc = "p-[calc(24px+(32-24)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
-
 const ListDetails: React.FC = () => {
   const { listMetadata, listData, progress } = useSubmitListContext();
   return (
     <div
-      className={cn(
+      className={clsx(
         "flex flex-col gap-5 w-full",
         "justify-start items-start",
-        paddingCalc,
-        "pb-2 border-b border-klerosUIComponentsStroke",
+        "p-fluid-24-32 pb-2 border-b border-klerosUIComponentsStroke",
         "lg:flex-row lg:justify-between lg:items-center lg:gap-0 lg:pb-4"
       )}
     >
diff --git a/web/src/pages/SubmitList/DeployList/index.tsx b/web/src/pages/SubmitList/DeployList/index.tsx
index 0fe470a1..f8bd1999 100644
--- a/web/src/pages/SubmitList/DeployList/index.tsx
+++ b/web/src/pages/SubmitList/DeployList/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import NavigationButtons from "../NavigationButtons";
 import { AlertMessage, Card } from "@kleros/ui-components-library";
 import Progress from "./Progress";
@@ -12,7 +11,7 @@ const DeployList: React.FC = () => {
   const isSuccess = progress === ListProgress.SubmitSuccess;
 
   return (
-    <div className="flex flex-col items-center gap-8 w-full py-0" style={{ paddingInline: responsiveSize(0, 108) }}>
+    <div className="flex flex-col items-center gap-8 w-full py-0 px-fluid-0-108">
       <Card className="flex flex-col w-full h-max">
         <ListDetails />
         <Progress />
diff --git a/web/src/pages/SubmitList/ItemParameters/CustomName.tsx b/web/src/pages/SubmitList/ItemParameters/CustomName.tsx
index 9c3de680..863a20d8 100644
--- a/web/src/pages/SubmitList/ItemParameters/CustomName.tsx
+++ b/web/src/pages/SubmitList/ItemParameters/CustomName.tsx
@@ -2,14 +2,13 @@ import React from "react";
 import NavigationButtons from "../NavigationButtons";
 import Header from "../Header";
 import { useSubmitListContext } from "context/SubmitListContext";
-import { cn } from "src/utils";
-import { BASE_CONTAINER_LANDSCAPE_WIDTH_CALC, BASE_CONTAINER_STYLE } from "../constants";
+import { BASE_CONTAINER_STYLE } from "../constants";
 import { TextField } from "@kleros/ui-components-library";
 
 const CustomName: React.FC = () => {
   const { listMetadata, setListMetadata } = useSubmitListContext();
   return (
-    <div className={cn(BASE_CONTAINER_STYLE, BASE_CONTAINER_LANDSCAPE_WIDTH_CALC)}>
+    <div className={BASE_CONTAINER_STYLE}>
       <Header text="Custom Item Name" />
       <label className="w-full">
         By default, we use the words (item, items) to describe the content of a list. If desired, you can customize it.
diff --git a/web/src/pages/SubmitList/ItemParameters/Deposit.tsx b/web/src/pages/SubmitList/ItemParameters/Deposit.tsx
index 96bca8b9..0cc2ffa5 100644
--- a/web/src/pages/SubmitList/ItemParameters/Deposit.tsx
+++ b/web/src/pages/SubmitList/ItemParameters/Deposit.tsx
@@ -6,7 +6,7 @@ import { useSubmitListContext } from "context/SubmitListContext";
 import { parseEther } from "viem";
 import { formatETH } from "utils/format";
 import { cn } from "src/utils";
-import { BASE_CONTAINER_LANDSCAPE_WIDTH_CALC, BASE_CONTAINER_STYLE } from "../constants";
+import { BASE_CONTAINER_STYLE } from "../constants";
 
 const depositContainerStyle = "flex flex-col gap-8 w-full";
 const sliderContainerStyle = "w-full p-4";
@@ -16,7 +16,7 @@ const Deposit: React.FC = () => {
   const { listData, setListData } = useSubmitListContext();
 
   return (
-    <div className={cn(BASE_CONTAINER_STYLE, BASE_CONTAINER_LANDSCAPE_WIDTH_CALC)}>
+    <div className={cn(BASE_CONTAINER_STYLE)}>
       <div className="flex flex-col gap-12 w-full">
         <div className={cn(depositContainerStyle)}>
           <Header text="Item Deposit" />
diff --git a/web/src/pages/SubmitList/ItemParameters/Fields/index.tsx b/web/src/pages/SubmitList/ItemParameters/Fields/index.tsx
index d9fdb9bb..ef2e4749 100644
--- a/web/src/pages/SubmitList/ItemParameters/Fields/index.tsx
+++ b/web/src/pages/SubmitList/ItemParameters/Fields/index.tsx
@@ -6,8 +6,7 @@ import PlusMinusField from "components/PlusMinusField";
 import LightButton from "components/LightButton";
 import HistoryIcon from "svgs/icons/history.svg";
 import { ListField, useSubmitListContext } from "context/SubmitListContext";
-import { cn } from "src/utils";
-import { BASE_CONTAINER_LANDSCAPE_WIDTH_CALC, BASE_CONTAINER_STYLE } from "../../constants";
+import { BASE_CONTAINER_STYLE } from "../../constants";
 
 const Fields: React.FC = () => {
   const { listMetadata, setListMetadata } = useSubmitListContext();
@@ -41,7 +40,7 @@ const Fields: React.FC = () => {
   };
 
   return (
-    <div className={cn(BASE_CONTAINER_STYLE, BASE_CONTAINER_LANDSCAPE_WIDTH_CALC)}>
+    <div className={BASE_CONTAINER_STYLE}>
       <Header text="Item Fields" />
       <div className="flex flex-col gap-4 w-full mb-2.5">
         <label className="w-full">
diff --git a/web/src/pages/SubmitList/ItemParameters/ItemPreview/ItemDisplay.tsx b/web/src/pages/SubmitList/ItemParameters/ItemPreview/ItemDisplay.tsx
index 1fc55c44..917201a4 100644
--- a/web/src/pages/SubmitList/ItemParameters/ItemPreview/ItemDisplay.tsx
+++ b/web/src/pages/SubmitList/ItemParameters/ItemPreview/ItemDisplay.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import ItemInformationCard from "components/InformationCards/ItemInformationCard";
 import { useSubmitListContext } from "context/SubmitListContext";
 import { constructItemWithMockValues } from "utils/submitListUtils";
@@ -10,7 +9,7 @@ const ItemDisplay: React.FC<IItemDisplay> = ({}) => {
   const { listMetadata } = useSubmitListContext();
   const item = constructItemWithMockValues(listMetadata);
   return (
-    <div className="flex flex-col" style={{ gap: responsiveSize(32, 24) }}>
+    <div className="flex flex-col gap-fluid-32-24">
       <p className="text-klerosUIComponentsPrimaryBlue">Check how the item is displayed on the Item page:</p>
       <ItemInformationCard className="m-0" {...item} policyURI={listMetadata.policyURI ?? ""} isPreview />
     </div>
diff --git a/web/src/pages/SubmitList/ItemParameters/ItemPreview/ListDisplay.tsx b/web/src/pages/SubmitList/ItemParameters/ItemPreview/ListDisplay.tsx
index eb2c0530..463b8396 100644
--- a/web/src/pages/SubmitList/ItemParameters/ItemPreview/ListDisplay.tsx
+++ b/web/src/pages/SubmitList/ItemParameters/ItemPreview/ListDisplay.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import ItemCard from "components/ItemCard";
 import { useSubmitListContext } from "context/SubmitListContext";
 import { constructItemWithMockValues } from "utils/submitListUtils";
@@ -11,7 +10,7 @@ const ListDisplay: React.FC<IListDisplay> = ({}) => {
   const item = constructItemWithMockValues(listMetadata);
 
   return (
-    <div className="flex flex-col" style={{ gap: responsiveSize(32, 24) }}>
+    <div className="flex flex-col gap-fluid-32-24">
       <p className="text-klerosUIComponentsPrimaryBlue">Check how the item is displayed on the List page:</p>
       <ItemCard {...item} />
     </div>
diff --git a/web/src/pages/SubmitList/ItemParameters/ItemPreview/index.tsx b/web/src/pages/SubmitList/ItemParameters/ItemPreview/index.tsx
index 511422b3..ba4fa4bf 100644
--- a/web/src/pages/SubmitList/ItemParameters/ItemPreview/index.tsx
+++ b/web/src/pages/SubmitList/ItemParameters/ItemPreview/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import { Card } from "@kleros/ui-components-library";
 import NavigationButtons from "../../NavigationButtons";
 import ListDisplay from "./ListDisplay";
@@ -8,18 +7,14 @@ import clsx from "clsx";
 
 const ItemPreview: React.FC = () => {
   return (
-    <div className="flex flex-col items-center gap-8 w-full py-0" style={{ paddingInline: responsiveSize(10, 130) }}>
+    <div className="flex flex-col items-center gap-8 w-full py-0 px-fluid-10-130">
       <h2 className="w-full text-2xl text-center text-klerosUIComponentsSecondaryPurple">Item Preview</h2>
       <Card
         className={clsx(
           "relative flex flex-col gap-8 w-full h-auto min-h-[100px]",
-          "border-dashed border-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue"
+          "border-dashed border-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue",
+          "mb-fluid-0-16 py-fluid-24-48 px-fluid-24-32"
         )}
-        style={{
-          marginBottom: responsiveSize(0, 16),
-          paddingBlock: responsiveSize(24, 48),
-          paddingInline: responsiveSize(24, 32),
-        }}
       >
         <ListDisplay />
         <ItemDisplay />
diff --git a/web/src/pages/SubmitList/ListParameters/Description.tsx b/web/src/pages/SubmitList/ListParameters/Description.tsx
index 48cb5520..ef2ad6de 100644
--- a/web/src/pages/SubmitList/ListParameters/Description.tsx
+++ b/web/src/pages/SubmitList/ListParameters/Description.tsx
@@ -3,8 +3,7 @@ import NavigationButtons from "../NavigationButtons";
 import Header from "../Header";
 import { TextArea } from "@kleros/ui-components-library";
 import { useSubmitListContext } from "context/SubmitListContext";
-import { cn } from "src/utils";
-import { BASE_CONTAINER_LANDSCAPE_WIDTH_CALC, BASE_CONTAINER_STYLE } from "../constants";
+import { BASE_CONTAINER_STYLE } from "../constants";
 const Description: React.FC = () => {
   const { listMetadata, setListMetadata } = useSubmitListContext();
 
@@ -12,7 +11,7 @@ const Description: React.FC = () => {
     setListMetadata({ ...listMetadata, description: value });
   };
   return (
-    <div className={cn(BASE_CONTAINER_STYLE, BASE_CONTAINER_LANDSCAPE_WIDTH_CALC)}>
+    <div className={BASE_CONTAINER_STYLE}>
       <Header text="Description" />
       <TextArea
         className="[&_textarea]:w-full [&_textarea]:h-28 custom-scrollbar"
diff --git a/web/src/pages/SubmitList/ListParameters/ListPreview/HomePageDisplay.tsx b/web/src/pages/SubmitList/ListParameters/ListPreview/HomePageDisplay.tsx
index 88293513..adf5c0da 100644
--- a/web/src/pages/SubmitList/ListParameters/ListPreview/HomePageDisplay.tsx
+++ b/web/src/pages/SubmitList/ListParameters/ListPreview/HomePageDisplay.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import RegistryCard from "components/RegistryCard";
 import { useSubmitListContext } from "context/SubmitListContext";
 import { Status } from "src/graphql/graphql";
@@ -10,7 +9,7 @@ const HomePageDisplay: React.FC = () => {
   const { listMetadata } = useSubmitListContext();
   const previewData = useMemo(() => listMetadata, [listMetadata]);
   return (
-    <div className="flex flex-col" style={{ gap: responsiveSize(32, 24) }}>
+    <div className="flex flex-col gap-fluid-32-24">
       <p className="text-klerosUIComponentsPrimaryBlue">Check how the list is displayed on the home page:</p>
       <RegistryCard
         id={"1"}
diff --git a/web/src/pages/SubmitList/ListParameters/ListPreview/ListPageDisplay.tsx b/web/src/pages/SubmitList/ListParameters/ListPreview/ListPageDisplay.tsx
index f4347dd4..c9c70a36 100644
--- a/web/src/pages/SubmitList/ListParameters/ListPreview/ListPageDisplay.tsx
+++ b/web/src/pages/SubmitList/ListParameters/ListPreview/ListPageDisplay.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import RegistryInformationCard from "components/InformationCards/RegistryInformationCard";
 import { useSubmitListContext } from "context/SubmitListContext";
 import { Status } from "src/graphql/graphql";
@@ -12,7 +11,7 @@ const ListPageDisplay: React.FC = () => {
   const previewData = useMemo(() => listMetadata, [listMetadata]);
 
   return (
-    <div className="flex flex-col" style={{ gap: responsiveSize(32, 24) }}>
+    <div className="flex flex-col gap-fluid-32-24">
       <p className="text-klerosUIComponentsPrimaryBlue">Check how the list is displayed on the List page:</p>
       <RegistryInformationCard
         className="m-0"
diff --git a/web/src/pages/SubmitList/ListParameters/ListPreview/index.tsx b/web/src/pages/SubmitList/ListParameters/ListPreview/index.tsx
index 17335d37..f7c2e6da 100644
--- a/web/src/pages/SubmitList/ListParameters/ListPreview/index.tsx
+++ b/web/src/pages/SubmitList/ListParameters/ListPreview/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { responsiveSize } from "styles/responsiveSize";
 import { Card } from "@kleros/ui-components-library";
 import ListPageDisplay from "./ListPageDisplay";
 import HomePageDisplay from "./HomePageDisplay";
@@ -12,13 +11,9 @@ const ListPreview: React.FC = () => {
       <Card
         className={clsx(
           "relative flex flex-col gap-8 w-full h-auto min-h-[100px]",
-          "border-dashed border-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue"
+          "border-dashed border-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue",
+          "mb-fluid-0-16 py-fluid-24-48 px-fluid-24-32"
         )}
-        style={{
-          marginBottom: responsiveSize(0, 16),
-          paddingBlock: responsiveSize(24, 48),
-          paddingInline: responsiveSize(24, 32),
-        }}
       >
         <HomePageDisplay />
         <ListPageDisplay />
diff --git a/web/src/pages/SubmitList/ListParameters/LogoUpload.tsx b/web/src/pages/SubmitList/ListParameters/LogoUpload.tsx
index 7125f057..b17f4cd1 100644
--- a/web/src/pages/SubmitList/ListParameters/LogoUpload.tsx
+++ b/web/src/pages/SubmitList/ListParameters/LogoUpload.tsx
@@ -6,9 +6,9 @@ import { useSubmitListContext } from "context/SubmitListContext";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 import ListPreview from "./ListPreview";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
-import { cn, getFileUploaderMsg } from "src/utils";
+import { getFileUploaderMsg } from "src/utils";
 import useIsDesktop from "hooks/useIsDesktop";
-import { BASE_CONTAINER_LANDSCAPE_WIDTH_CALC, BASE_CONTAINER_STYLE } from "../constants";
+import { BASE_CONTAINER_STYLE } from "../constants";
 
 const LogoUpload: React.FC = () => {
   const { listMetadata, setListMetadata, setIsLogoUploading } = useSubmitListContext();
@@ -51,7 +51,7 @@ const LogoUpload: React.FC = () => {
     reader.readAsDataURL(file);
   };
   return (
-    <div className={cn(BASE_CONTAINER_STYLE, BASE_CONTAINER_LANDSCAPE_WIDTH_CALC)}>
+    <div className={BASE_CONTAINER_STYLE}>
       <Header text="Logo" />
       <FileUploader
         className="w-full [&_small]:whitespace-pre-line [&_small]:text-sm"
diff --git a/web/src/pages/SubmitList/ListParameters/Policy.tsx b/web/src/pages/SubmitList/ListParameters/Policy.tsx
index a40bdb5d..dc547d74 100644
--- a/web/src/pages/SubmitList/ListParameters/Policy.tsx
+++ b/web/src/pages/SubmitList/ListParameters/Policy.tsx
@@ -7,9 +7,9 @@ import { getIpfsUrl } from "utils/getIpfsUrl";
 import { Link } from "react-router-dom";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
-import { cn, getFileUploaderMsg } from "src/utils";
+import { getFileUploaderMsg } from "src/utils";
 import useIsDesktop from "hooks/useIsDesktop";
-import { BASE_CONTAINER_LANDSCAPE_WIDTH_CALC, BASE_CONTAINER_STYLE } from "../constants";
+import { BASE_CONTAINER_STYLE } from "../constants";
 
 const Policy: React.FC = () => {
   const { listMetadata, setListMetadata, setIsPolicyUploading } = useSubmitListContext();
@@ -34,7 +34,7 @@ const Policy: React.FC = () => {
   };
 
   return (
-    <div className={cn(BASE_CONTAINER_STYLE, BASE_CONTAINER_LANDSCAPE_WIDTH_CALC)}>
+    <div className={BASE_CONTAINER_STYLE}>
       <Header text="Submit the List Policy File" />
       <label className="w-full">
         Fundamental to any list, the List Policy provides users with a set of rules that define what is allowed, and
diff --git a/web/src/pages/SubmitList/ListParameters/Title.tsx b/web/src/pages/SubmitList/ListParameters/Title.tsx
index 3a224946..5d7178f1 100644
--- a/web/src/pages/SubmitList/ListParameters/Title.tsx
+++ b/web/src/pages/SubmitList/ListParameters/Title.tsx
@@ -3,8 +3,7 @@ import { TextField } from "@kleros/ui-components-library";
 import NavigationButtons from "../NavigationButtons";
 import Header from "../Header";
 import { useSubmitListContext } from "context/SubmitListContext";
-import { cn } from "src/utils";
-import { BASE_CONTAINER_LANDSCAPE_WIDTH_CALC, BASE_CONTAINER_STYLE } from "../constants";
+import { BASE_CONTAINER_STYLE } from "../constants";
 
 const Title: React.FC = () => {
   const { listMetadata, setListMetadata } = useSubmitListContext();
@@ -13,7 +12,7 @@ const Title: React.FC = () => {
     setListMetadata({ ...listMetadata, title: value });
   };
   return (
-    <div className={cn(BASE_CONTAINER_STYLE, BASE_CONTAINER_LANDSCAPE_WIDTH_CALC)}>
+    <div className={BASE_CONTAINER_STYLE}>
       <Header text="Name" />
       <TextField
         aria-label="List name"
diff --git a/web/src/pages/SubmitList/constants.ts b/web/src/pages/SubmitList/constants.ts
index a5caf360..f26be11c 100644
--- a/web/src/pages/SubmitList/constants.ts
+++ b/web/src/pages/SubmitList/constants.ts
@@ -1,3 +1 @@
-export const BASE_CONTAINER_STYLE = "flex flex-col items-center gap-8 w-[84vw]";
-export const BASE_CONTAINER_LANDSCAPE_WIDTH_CALC =
-  "lg:w-[calc(442px+(700-442)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
+export const BASE_CONTAINER_STYLE = "flex flex-col items-center gap-8 w-[84vw] lg:w-fluid-442-700-900";
diff --git a/web/src/pages/SubmitList/index.tsx b/web/src/pages/SubmitList/index.tsx
index 53118805..36fd02fd 100644
--- a/web/src/pages/SubmitList/index.tsx
+++ b/web/src/pages/SubmitList/index.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { Navigate, Route, Routes, useLocation } from "react-router-dom";
-import { responsiveSize } from "styles/responsiveSize";
 import { useAccount } from "wagmi";
 import ConnectWallet from "components/ConnectWallet";
 import HeroImage from "components/HeroImage";
@@ -16,9 +15,7 @@ import CustomName from "./ItemParameters/CustomName";
 import AdvancedParameters from "./AdvancedParameters";
 import DeployList from "./DeployList";
 import EnsureAuth from "components/EnsureAuth";
-import { cn } from "src/utils";
-
-const landscapePaddingLeftCalc = "lg:px-[calc(25px+(65-25)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]";
+import clsx from "clsx";
 
 const SubmitList: React.FC = () => {
   const location = useLocation();
@@ -34,20 +31,15 @@ const SubmitList: React.FC = () => {
     <>
       <HeroImage />
       <div
-        className="flex flex-col w-full max-w-landscape my-0 mx-auto bg-klerosUIComponentsLightBackground"
-        style={{
-          paddingInline: responsiveSize(24, 32),
-          paddingTop: responsiveSize(24, 28),
-          paddingBottom: responsiveSize(76, 96),
-        }}
+        className={clsx(
+          "flex flex-col w-full max-w-landscape",
+          "my-0 mx-auto bg-klerosUIComponentsLightBackground",
+          "pt-fluid-24-28 pb-fluid-76-96 px-fluid-24-32"
+        )}
       >
         {isConnected && !isTimelineHidden ? (
           <label
-            className={cn(
-              "hidden",
-              "lg:flex lg:mb-5 lg:text-klerosUIComponentsSecondaryPurple",
-              landscapePaddingLeftCalc
-            )}
+            className={clsx("hidden", "lg:text-klerosUIComponentsSecondaryPurple", "lg:flex lg:mb-5 lg:px-fluid-25-65")}
           >
             Create a List
           </label>
diff --git a/web/src/styles/responsiveSize.ts b/web/src/styles/responsiveSize.ts
deleted file mode 100644
index 0af044d8..00000000
--- a/web/src/styles/responsiveSize.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @description this func applies repsonsiveness to a css property, the value will range from minSize to maxSize
- * @param minSize the minimum value of the property
- * @param maxSize max value of the property
- * @param minScreen the min screen width at which the property will be at minSize
- * @param maxScreen the max screen width at which the property will be at maxSize
- *
- */
-export const responsiveSize = (minSize: number, maxSize: number, minScreen: number = 375, maxScreen: number = 1250) =>
-  `calc(${minSize}px + (${maxSize} - ${minSize}) * (min(max(100vw, ${minScreen}px), ${maxScreen}px) - ${minScreen}px) / (${
-    maxScreen - minScreen
-  }))`;