Skip to content

Add text+box scaling when screen size goes down #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MokeyCodes wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add text+box scaling when screen size goes down #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/contact/components/GeneralSupport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import React from "react";

export default function GeneralSupport() {
return (
<div className="flex rounded-3xl w-[1152px] h-[530px] bg-gradient-to-r from-[#8CDFA8] to-[#34543F]">
<div className="flex text-center items-center text-7xl w-[400px] pl-8 text-white">
<div className="flex flex-col md:flex-row pt-6 md:pt-0 items-center md:items-stretch rounded-3xl w-[92vw] max-w-[1152px] h-[clamp(320px,60vw,530px)] md:h-[530px] bg-gradient-to-r from-[#8CDFA8] to-[#34543F]">
<div className="flex text-center text-[clamp(2.2rem,7vw,6.5rem)] md:text-7xl items-center w-[400px] pl-8 text-white">
GENERAL SUPPORT
</div>
<div className="p-20 w-[640px] text-white text-2xl">
<div className="p-6 md:p-20 text-center md:text-left text-white text-[clamp(0.95rem,2.6vw,1.5rem)] md:text-2xl">
Loren ipsum odt alor If you need support, you can do this that and the third Contact at email@email.com with inquiries text text
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions app/contact/components/PressInquiries.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import React from "react";

export default function PressInquiries() {
return (
<div className="flex rounded-3xl w-[1152px] h-[530px] bg-gradient-to-r from-[#FF7958] to-[#691F0D]">
<div className="flex text-center items-center text-7xl justify-start w-[400px] pl-8 text-white text-4xl">
<div className="flex flex-col md:flex-row pt-6 md:pt-0 items-center md:items-stretch rounded-3xl w-[92vw] max-w-[1152px] h-[clamp(320px,60vw,530px)] md:h-[530px] bg-gradient-to-r from-[#FF7958] to-[#691F0D]">
<div className="flex text-center text-[clamp(2.2rem,7vw,6.5rem)] md:text-7xl items-center w-[400px] pl-8 text-white">
PRESS INQUIRIES
</div>
<div className="p-20 justify-end w-[640px] text-white text-2xl">
<div className="p-6 md:p-20 text-center md:text-left text-white text-[clamp(0.95rem,2.6vw,1.5rem)] md:text-2xl">
Contact US at
<p>local@domain.com for inquiries </p>
<p>Press can do this that and the third</p>
Expand Down
6 changes: 3 additions & 3 deletions app/contact/components/VendorInquiries.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import React from "react";

export default function VendorInquiries() {
return (
<div className="flex rounded-3xl w-[1152px] h-[530px] bg-gradient-to-r from-[#FF9775] to-[#B42C00]">
<div className="flex text-center items-center text-7xl w-[400px] pl-8 text-white">
<div className="flex flex-col md:flex-row pt-6 md:pt-0 items-center md:items-stretch rounded-3xl w-[92vw] max-w-[1152px] h-[clamp(320px,60vw,530px)] md:h-[530px] bg-gradient-to-r from-[#FF9775] to-[#B42C00]">
<div className="flex text-center text-[clamp(2.2rem,7vw,6.5rem)] md:text-7xl items-center w-[400px] pl-8 text-white">
VENDOR INQUIRIES
</div>
<div className="p-20 w-[640px] text-white text-2xl">
<div className="p-6 md:p-20 text-center md:text-left text-white text-[clamp(0.95rem,2.6vw,1.5rem)] md:text-2xl">
<p>Contact Us</p>
<p>at local@domain.com</p>
<p>Vendors do this n that</p>
Expand Down