我正在使用“react-fast-marquee”库在我的下一个 js 网络应用程序中渲染 2 个选框，但它在较小的设备上重叠

Question

我正在使用“react-fast-marquee”库（https://www.npmjs.com/package/react-fast-marquee）

第一个是提供股票数据，名称，价格和价格变化。 第二个是特色公司。

问题是（股票数据的第一个选框）在较小的设备上重叠。附图片=> 对于第二个选取框，我渲染了 7 张公司图片，但在较小的设备上它只显示了 2 张图片。有人可以帮帮我吗？使用库或其他方式渲染 2 个选框，没有这些问题

在上面的附图中，您可以看到第一个选取框是重叠的，第二个选取框尽管渲染了 7 个不同公司的图像，但它只显示了 2 个，甚至它们是重叠的。

选取框 1 的代码 =>

import Marquee from 'react-fast-marquee'

const StockPricesComponent = () => {
  return (
    <div>
      <Marquee play={true} pauseOnHover={true} speed={100} gradient={false} className="bg-black h-12">

          <div className="flex items-center gap-4">
            <p className='uppercase text-white whitespace-nowrap '>nifty bank</p>
            <p className='text-white'>41,559.40</p>
            <p className='text-green-500'>0.01%</p>
          </div>

          <div className="flex items-center gap-4">
            <p className='uppercase text-white whitespace-nowrap '>bajaj finance</p>
            <p className='text-white'>6,345.40</p>
            <p className='text-red-500'>0.30%</p>
          </div>

          <div className="flex items-center gap-4">
            <p className='uppercase text-white whitespace-nowrap '>bharatiartl</p>
            <p className='text-white'>771.40</p>
            <p className='text-green-500'>0.69%</p>
          </div>

          <div className="flex items-center gap-4">
            <p className='uppercase text-white whitespace-nowrap '>hdfcbank</p>
            <p className='text-white'>4,159.40</p>
            <p className='text-green-500'>0.40%</p>
          </div>

          <div className="flex items-center gap-4">
            <p className='uppercase text-white whitespace-nowrap '>uniliver</p>
            <p className='text-white'>2,577.40</p>
            <p className='text-red-500'>0.36%</p>
          </div>

          <div className="flex items-center gap-4">
            <p className='uppercase text-white whitespace-nowrap '>indigo</p>
            <p className='text-white'>2,043.40</p>
            <p className='text-red-500'>0.36%</p>
          </div>

          <div className="flex items-center gap-4">
            <p className='uppercase text-white whitespace-nowrap '>hdfcbank</p>
            <p className='text-white'>4,159.40</p>
            <p className='text-green-500'>0.40%</p>
          </div>

          <div className="flex items-center gap-4">
            <p className='uppercase text-white whitespace-nowrap '>uniliver</p>
            <p className='text-white'>2,577.40</p>
            <p className='text-red-500'>0.36%</p>

        
        </div>

      </Marquee>
    </div>
  )
}

export default StockPricesComponent

选取框 2 的代码 =>

import Image from 'next/image'
import Marquee from 'react-fast-marquee'

const FeaturedCompaniesComponent = () => {
  return (
    <div>
      <p className='text-red-500 ml-6 uppercase text-2xl font-semibold'>featured Companies</p>

      <br />
      <div className="companiesMarqeeHold">
        <Marquee gradient={false} speed={20}>
          <Image src={company1} quality={100} alt="" className='CompanyImage' />

          <Image src={company2} quality={100} alt="" className='CompanyImage' />

          <Image src={company3} quality={100} alt="" className='CompanyImage' />

          <Image src={company4} quality={100} alt="" className='CompanyImage' />

          <Image src={company5} quality={100} alt="" className='CompanyImage' />

          <Image src={company6} quality={100} alt="" className='CompanyImage' />

          <Image src={company7} quality={100} alt="" className='CompanyImage' />
        </Marquee>


      </div>


    </div>
  )
}

export default FeaturedCompaniesComponent