chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix horizontal scrolling on mobile

Browse Source
This commit is contained in:
Chuck Dries 2022-07-11 17:29:36 -07:00
parent b56b9b4500
commit f89f01ff98
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/GalleryImage/GalleryImage.js
View File

@ -185,7 +185,7 @@ const GalleryImage = ({
}}
to={`/photogallery/${prevImage}/`}
>
<span className="p-2 lg:p-4 bg-muted-light/25 rounded-full"><ChevronLeft /></span>
<span className="p-1 lg:p-4 bg-muted-light/25 rounded-full"><ChevronLeft /></span>
</Link>
)}
<div className={classnames("pb-2 flex", orientationClasses)}>
@ -264,7 +264,7 @@ const GalleryImage = ({
icon={<Calendar />}
title="date taken"
/>
<div className="flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
<div className="sm:flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
<MetadataItem
data={shutterSpeed}
icon={<Stopwatch />}
@ -317,7 +317,7 @@ const GalleryImage = ({
}}
to={`/photogallery/${nextImage}/`}
>
<span className="p-2 lg:p-4 bg-muted-light/25 rounded-full"><ChevronRight /></span>
<span className="p-1 lg:p-4 bg-muted-light/25 rounded-full"><ChevronRight /></span>
</Link>
)}
</div>

2
src/components/GalleryImage/MetadataItem.js
View File

@ -5,7 +5,7 @@ const MetadataItem = ({ icon, data, title }) =>
<div className="flex justify-end items-end mr-2 font-mono">
<div className="flex flex-col items-end my-2">
<span className="text-sm opacity-60 m-0 ">{title}</span>
<span className="text-lg leading-4">{data}</span>
<span className="md:text-lg leading-4">{data}</span>
</div>
<span className="ml-2 pb-2 text-2xl">
{icon}