reactjs/duolingo-clone
1
0
Fork 0
mirror of https://github.com/sanidhyy/duolingo-clone.git synced 2025-08-06 18:25:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: banner on mobile devices

Browse Source
This commit is contained in:
Sanidhya Kumar Verma
2025-02-09 21:42:55 +05:30
parent c95cbabb2e
commit 5b4a55d632
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/(marketing)/banner.tsx
View File

@ -44,7 +44,7 @@ const Banner = ({ hide, setHide }: BannerProps) => {
return (
<div
id="sticky-banner"
className="fixed left-0 top-0 z-50 block h-10 w-full bg-secondary p-2.5 opacity-[0.98] shadow-md"
className="fixed left-0 top-0 z-50 block h-20 w-full bg-secondary p-2.5 opacity-[0.98] shadow-md sm:h-16 lg:h-10"
>
<div className="relative w-full">
<div className="flex items-center justify-center">
@ -79,9 +79,9 @@ const Banner = ({ hide, setHide }: BannerProps) => {
data-dismiss-target="#sticky-banner"
onClick={handleBannerClose}
type="button"
className="absolute right-0 top-1/2 -translate-y-1/2 opacity-80 hover:opacity-100"
className="absolute right-0 top-3/4 -translate-y-1/2 rounded-full border border-gray-300 bg-white p-1 opacity-80 hover:opacity-90 sm:top-1/2"
>
<XIcon className="size-3" />
<XIcon className="size-3" strokeWidth={3} />
<span className="sr-only">Close banner</span>
</button>
</div>

2
app/(marketing)/header.tsx
View File

@ -31,7 +31,7 @@ export const Header = () => {
<header
className={cn(
"h-20 w-full border-b-2 border-slate-200 px-4",
!hideBanner ? "mt-10" : "mt-0"
!hideBanner ? "mt-20 sm:mt-16 lg:mt-10" : "mt-0"
)}
>
<div className="mx-auto flex h-full items-center justify-between lg:max-w-screen-lg">