3

I have a problem with my tuner, I try to keep the same size arrow, but when I reduce the resolution the arrow becomes smaller

<div className="shadow rounded my-5">
            <div onClick={() => toggle(index)} key={index} className="bg-[#8e9fbc] rounded text-white font-bold flex justify-between items-center cursor-pointer p-5">
        <span>{item.question}</span>
        {clicked === index ? (<ChevronDownIcon className="w-6 "/>) :<ChevronRightIcon className="w-6  "/>}
        
        </div>
       {clicked === index ? (<div className="p-5"> {item.reponse}</div>) : null} </div>

enter image description here

Can you help me? Thank you!

Pierre Torres
  • 247
  • 2
  • 11

1 Answers1

7

Simply apply flex-shrink: 0; to the icons, this prevent them from getting smaller.

Note that you should have width for those icons.

Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
yherbawi
  • 509
  • 2
  • 7