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}/`} 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> </Link>
)} )}
<div className={classnames("pb-2 flex", orientationClasses)}> <div className={classnames("pb-2 flex", orientationClasses)}>
@ -264,7 +264,7 @@ const GalleryImage = ({
icon={<Calendar />} icon={<Calendar />}
title="date taken" 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 <MetadataItem
data={shutterSpeed} data={shutterSpeed}
icon={<Stopwatch />} icon={<Stopwatch />}
@ -317,7 +317,7 @@ const GalleryImage = ({
}} }}
to={`/photogallery/${nextImage}/`} 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> </Link>
)} )}
</div> </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 justify-end items-end mr-2 font-mono">
<div className="flex flex-col items-end my-2"> <div className="flex flex-col items-end my-2">
<span className="text-sm opacity-60 m-0 ">{title}</span> <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> </div>
<span className="ml-2 pb-2 text-2xl"> <span className="ml-2 pb-2 text-2xl">
{icon} {icon}