saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style fix for super wide screens

Browse Source
This commit is contained in:
austinkelsay 2024-10-11 14:53:57 -05:00
parent 5c9bcc95e3
commit db6824d864
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/banner/HeroBanner.js
View File

@ -19,6 +19,8 @@ const HeroBanner = () => {
const { returnImageProxy } = useImageProxy(); const { returnImageProxy } = useImageProxy();
const isMobile = windowWidth <= 800; const isMobile = windowWidth <= 800;
const isWideScreen = windowWidth >= 2200;
const isSuperWideScreen = windowWidth >= 2600;
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
@ -44,8 +46,15 @@ const HeroBanner = () => {
} }
}; };
const getHeroHeight = () => {
if (isSuperWideScreen) return 'h-[900px]';
if (isWideScreen) return 'h-[700px]';
if (isMobile) return 'h-[450px]';
return 'h-[600px]';
};
return ( return (
<div className={`${isMobile ? 'h-[450px]' : 'h-[600px]'} ${isTabView ? 'mx-0' : 'm-14'} relative flex justify-center items-center overflow-hidden drop-shadow-2xl`}> <div className={`${getHeroHeight()} ${isTabView ? 'mx-0' : 'm-14'} relative flex justify-center items-center overflow-hidden drop-shadow-2xl`}>
<Image <Image
src={HeroImage} src={HeroImage}
alt="Banner" alt="Banner"