Next.js Discord

Discord Forum

Shadcn carousel is wider than body on smaller windows

Answered
Singapura posted this in #help-forum
Open in Discord
SingapuraOP
Someone save me.

I am using shadcn components and this nav and carousel button are pretty much outside the body for some reason. I commented the entire navbar out and the carousel out, thinking that thats the cause and the horizontal scrollbar still is there. I dont even know why, I dont even know what part of my code to show since the problem could be anywhere.

Can anybody help? If you need more info, I can provide it because at this point I do not know what to do.
Answered by Singapura
Fixed: add px-12(or more) to wrapper div of carousel.
View full answer

6 Replies

SingapuraOP
Okay so now I know in which section the problem is.
I commented out a whole Component and the scrollbar got removed.
So the problem is somewhere here:
import { ButtonWithIcon } from "@/components/Button";
import { CarouselSize } from "@/components/Carousel";
import { Briefcase, File } from "lucide-react";

import Image from "next/image";
import Link from "next/link";
import React from "react";
import { montserrat } from "../ui/fonts";

const Reviews = () => {
  return (
    <section className="w-full flex flex-col justify-start items-center h-3/4 relative mt-5 md:mt-16 aspect-[500/400] 2xl:aspect-[500/230] lg:aspect-[500/300] md:aspect-[500/350] ">
      <Image
        src="/provincetown-wallpaper.jpg"
        alt="photo of provincetown"
        fill
        className="object-cover "
      />

      <div className="z-10 flex flex-col items-center justify-between gap-6 md:gap-12 w-full">
        <h2
          className={`${montserrat.className} mt-4 md:mt-16 text-center md:text-5xl text-2xl text-title-color font-medium`}
        >
          Client Reviews
        </h2>

        <div className="w-11/12 md:h-[1px] h-[1px] bg-gray-500 md:mb-10"></div>
        <CarouselSize />
        <div className="flex flex-col md:flex-row justify-center items-center gap-2 md:gap-24 mb-8 md:mb-4">
          <Link href={"/services"}>
            <ButtonWithIcon icon={Briefcase} content={"Our Services"} />
          </Link>
          <Link href={"/about"}>
            <ButtonWithIcon icon={File} content={"About Us"} />
          </Link>
        </div>
      </div>
    </section>
  );
};

export default Reviews;
Okay so I commented out the <CarouselSize /> and the issue disappears.
SingapuraOP
This is carousel.tsx above
And this is Carousel.tsx(The component which I render)
import * as React from "react";

import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

export function CarouselSize() {
  return (
    <Carousel
      opts={{
        align: "start",
        loop: true,
      }}
      className="w-full md:max-w-xl z-20 lg:max-w-3xl "
    >
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
            <div className="p-1">
              <Card>
                <CardContent className="flex aspect-square items-center justify-center p-6">
                  <span className="text-3xl font-semibold">{index + 1}</span>
                </CardContent>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

If someone can spot it please let me know
SingapuraOP
Fixed: add px-12(or more) to wrapper div of carousel.
Answer