Skip to content

Commit

Permalink
screens sizes adjusted
Browse files Browse the repository at this point in the history
  • Loading branch information
abuzar-ce committed Oct 4, 2024
1 parent ca0ae87 commit 96d901e
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 12 deletions.
2 changes: 1 addition & 1 deletion src/components/Cards.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const Cards = ({ viewMode }) => {
<div className="w-full max-w-screen-xl mx-auto pb-10 mb-10">
<div
className={`grid gap-6 mx-5 ${
viewMode === "mobile" ? "grid-cols-1" : "md:grid-cols-3"
viewMode === "mobile" ? "grid-cols-1" : "min-md:grid-cols-3"
}`}
>
{/* card 1 */}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ContactForm.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const ContactForm = () => {
);
return (
<div className="w-full max-w-2xl mx-auto h-96 flex flex-col items-center">
<form action="" className="md:w-2/4 bg-shadow px-2 py-2 rounded-xl">
<form action="" className="min-md:w-2/4 bg-shadow px-2 py-2 rounded-xl">
<div className="flex flex-row items-center px-3 py-1 w-full gap-1 bg-white rounded-lg mb-2 overflow-hidden">
<svg
className="fill-svgColor"
Expand Down
4 changes: 2 additions & 2 deletions src/components/GetInTouch.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ const GetInTouch = () => {
<section>
<div className="pt-6 flex justify-center">
<div className="px-4 sm:px-6 w-full max-w-3xl">
<div className="mb-12 md:mb-20 flex flex-col justify-center items-center">
<div className="mb-12 min-md:mb-20 flex flex-col justify-center items-center">
<div className=" bg-shadow shadow-cf0cr px-2 py-1 rounded-lg">
<div className=" py-1 px-3 bg-primary rounded-lg ">
<span>Contact us</span>
</div>
</div>
<h1 className="text-5xl md:text-6xl font-bold pb-4 mt-4">
<h1 className="text-5xl min-md:text-6xl font-bold pb-4 mt-4">
Get in touch
</h1>
<p className="text-xl text-center">
Expand Down
8 changes: 4 additions & 4 deletions src/components/header/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ const Header = ({ viewMode, setViewMode, headerVisible, setHeaderVisible }) => {
return (
<div className="bg-dark">
<div className="flex justify-between items-center py-3 px-7 h-18 w-full text-white z-30 relative">
<div className="flex md:flex-1">
<div className="flex min-md:flex-1">
<h1 className="m-0">
<Image src={logoImg} alt="logo" />
</h1>
</div>
<div className=" md:flex md:items-center">
<div className="xs:hidden min-md:flex min-md:items-center">
<button
className="demo-preview-desktop is-active rounded-sm mx-2 flex items-center justify-center p-0 h-8 w-8"
title="Desktop"
Expand All @@ -55,7 +55,7 @@ const Header = ({ viewMode, setViewMode, headerVisible, setHeaderVisible }) => {
</div>
<div className="flex items-center flex-1 justify-end">
<div className="demo-preview-select relative text-sm mr-3 flex gap-3">
<div className="demo-preview-selected font-medium text-gray-50 border border-gray-600 rounded-lg py-1.5 px-3 cursor-pointer w-36 md:flex items-center justify-center">
<div className="md:hidden demo-preview-selected font-medium text-gray-50 border border-gray-600 rounded-lg py-1.5 px-3 cursor-pointer w-36 min-md:flex items-center justify-center">
<Dropdown overlay={menuItems} trigger={["click"]}>
<a className="">
<span className="whitespace-nowrap overflow-hidden overflow-ellipsis w-[calc(100% - 22px)]">
Expand All @@ -66,7 +66,7 @@ const Header = ({ viewMode, setViewMode, headerVisible, setHeaderVisible }) => {
</Dropdown>
</div>
<div className="flex items-center gap-5">
<button className="js-buy btn-xs text-white font-bold text-[14px] bg-violet-500 hover:bg-violet-600 outline-none px-5 py-1 md:py-0 lg:py-3 rounded-lg box-border">
<button className="js-buy btn-xs text-white font-bold text-[14px] bg-violet-500 hover:bg-violet-600 outline-none px-5 py-1 -md:py-0 lg:py-3 rounded-lg box-border">
<span>
Buy Now <span className="text-white/50">-</span> $49{" "}
</span>
Expand Down
8 changes: 4 additions & 4 deletions src/components/header/MainHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";

const MainHeader = () => {
return (
<div className=" px-6 md:mt-6 flex justify-center mb-10 bg-custom_gradient">
<div className=" px-6 min-md:mt-6 flex justify-center mb-10 bg-custom_gradient">
<div className="w-full max-w-3xl">
<div className="rounded-lg flex gap-2 h-12 justify-between items-center px-3 shadow-cf0cr bg-gradient relative">
<div className="bg-shadow rounded-sm -z-10 -inset-[0.375rem] absolute">
Expand All @@ -29,13 +29,13 @@ const MainHeader = () => {
{/* navigation links */}
<nav className="">
<ul className="flex justify-center items-center gap-3">
<li className="font-medium md:px-6 md:py-1 hover:bg-shadow hover:cursor-pointer hover:rounded">
<li className="font-medium min-md:px-6 min-md:py-1 hover:bg-shadow hover:cursor-pointer hover:rounded">
Updates
</li>
<li className="md:px-6 md:py-1 hover:bg-shadow hover:cursor-pointer hover:rounded">
<li className="min-md:px-6 min-md:py-1 hover:bg-shadow hover:cursor-pointer hover:rounded">
FAQ
</li>
<li className="md:px-6 md:py-1 hover:bg-shadow hover:cursor-pointer hover:rounded">
<li className="min-md:px-6 min-md:py-1 hover:bg-shadow hover:cursor-pointer hover:rounded">
Contact us
</li>
</ul>
Expand Down
37 changes: 37 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,43 @@ module.exports = {
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
screens: {
"2xl": { max: "1535px" },
// => @media (max-width: 1535px) { ... }

xl: { max: "1279px" },
// => @media (max-width: 1279px) { ... }

lg: { max: "1024px" },
// => @media (max-width: 1023px) { ... }

md: { max: "767px" },
// => @media (max-width: 767px) { ... }

sm: { max: "639px" },
// => @media (max-width: 639px) { ... }

xs: { max: "425px" },
// => @media (max-width: 420px) { ... }

"min-2xl": { min: "1535px" },
// => @media (min-width: 1535px) { ... }

"min-xl": { min: "1279px" },
// => @media (min-width: 1279px) { ... }

"min-lg": { min: "1024px" },
// => @media (min-width: 1023px) { ... }

"min-md": { min: "768px" },
// => @media (min-width: 767px) { ... }

"min-sm": { min: "639px" },
// => @media (min-width: 639px) { ... }

"min-xs": { min: "425px" },
// => @media (min-width: 420px) { ... }
},
extend: {
backgroundColor: {
// Light mode colors
Expand Down

0 comments on commit 96d901e

Please sign in to comment.