fix: carousel on mobile screen

This commit is contained in:
Ephraim Atta-Duncan
2024-06-13 08:09:06 +00:00
parent 1647f7c4a0
commit 3356934590
2 changed files with 5 additions and 5 deletions

View File

@ -235,16 +235,16 @@ export const Carousel = () => {
</div>
</div>
<div className="dark:bg-background absolute bottom-2 right-2 flex w-[5%] flex-col items-center space-y-1 rounded-lg bg-white p-1.5">
<span className="text-foreground dark:text-muted-foreground text-xs">
<div className="dark:bg-background absolute bottom-2 right-2 flex w-[20%] flex-col items-center space-y-1 rounded-lg bg-white p-1.5 sm:w-[5%]">
<span className="text-foreground dark:text-muted-foreground text-[10px] sm:text-xs">
{selectedIndex + 1}/{slides.length}
</span>
<Progress value={progress} className="h-1" />
</div>
</Card>
<div className="mx-auto mt-12 max-w-4xl px-2">
<div className="mt-2 flex justify-between" ref={emblaThumbsRef}>
<div className="mx-auto mt-6 w-full max-w-4xl px-2 sm:mt-12">
<div className="mt-2 flex flex-wrap justify-between gap-6" ref={emblaThumbsRef}>
{slides.map((slide, index) => (
<Slide
key={index}

View File

@ -17,7 +17,7 @@ export const Slide: React.FC<SlideProps> = (props) => {
onClick={onClick}
type="button"
className={cn(
'text-muted-foreground dark:text-muted-foreground/60 border-b-2 border-transparent py-4',
'text-muted-foreground dark:text-muted-foreground/60 border-b-2 border-transparent py-1 text-xs sm:py-4 sm:text-base',
{
'border-primary text-foreground dark:text-muted-foreground border-b-2': selected,
},