How to make react-chrono timeline box smaller

Question

I'm using react-chrono for implementing a timeline in my application, however I cannot set the box width no matter how hard I try. My current implementation looks like this.

I'd like to make the card smaller as well. Here is my current code:

    <div className="flex flex-col m-5">
      <div className="hidden sm:block">
        <CardSection />
        <div className="h-80 bg-slate-200">
          <Chrono mode="VERTICAL" items={items}></Chrono>
        </div>
      </div>
    </div>

Answer 1

If you want the entire timeline to be narrower, you should be able to set a width on your <div> wrapper:

<div className="w-40 h-80 bg-slate-200">

If you also want to make the cards narrower, it looks like react-chrono provides a cardWidth property. This is untested:

<Chrono mode="VERTICAL" cardWidth={120} items={items}></Chrono>

See https://www.npmjs.com/package/react-chrono#props for all of the available props.

Answer 2

in react-chrono docs it says: "Please make sure you wrap the component in a container that has a width and height."

try it like that: (width your own width and height)

<div style={{ width: "500px", height: "400px" }}>
 <Chrono items={items} />
</div>

Hope it helps