Is there a way to have the middle of the page wider than the rest

HTML-CSS
1

0

Hello I am trying to develop a single page WebApp with Next JS. It is composed of four components. I would like to have an horizontal full page scroll in one of them (3x100% of width) without effecting the width of the other components but whenever I change the component’s width to 300% (because I want to have three full screen size slides) the other three components get wider with white spaces on the right and adjusting themselves to the one I change. How can I avoid that?

index.js -

<div id="Info" className="snap-start h-screen snap snap-y snap-mandatory ">
  <div className="snap-start w-screen h-screen snap snap-x snap-mandatory ">
    <HorizontalScrollFirstPage/>
    <FirstPageOfSlide/>
    <SecondPageOfSlide/>
  </div>
</div>

the component

<main>
<div className="flex flex-row w-[300%] h-screen">
<div className="flex flex-col w-[100%] h-screen">
</div>
<div className="flex flex-col w-[100%] h-screen">
</div>
<div className="flex flex-col w-[100%] h-screen">
</div>
</div>
</main>
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.