I dont know how to put text under another text heading

[rishilahoti99]

i want to move the marked line to the place I specified can somebody tell me how can I do that so it can help me in future too

[partum]

you should make sure both h1 and h5 are set to display: block

[rishilahoti99]

can you tell me how?

[bbsmooth]

Heading elements are block level elements by default, so unless you specifically set them to a different display type then that is probably not your issue.

We really don’t have enough information to give you good help. The best thing would be for you to put your project in a public place and then give us a link so we can see and test it for ourselves.

[rishilahoti99]

GitHub - rishilahoti/React-Movie-App

[bbsmooth]

<div class="col">
  <h1>PEPESEARCH</h1>
  <h5></h5>
</div>
<div class="col">
  <div class="col">
    <h1></h1>
    <h5>Search Movie Here</h5>
  </div>
</div>

Why do you have duplicates for these? You only need one of them. You should be using the h1 and h5 in the same div, not two separate divs.

[lasjorg]

Looking at the image. The parent container is a flex container set to row direction. If you set the direction to be a column instead, using the flex-column class, they should stack.

[rishilahoti99]

ohh i was figuring out so i copy paste there two times

[rishilahoti99]

i will try and see if i can fix it by my own

[lasjorg]

OK I can see the search is inside the same container so that wouldn’t work as you want it to.

You should be able to just put both heading elements inside the col container instead.

<div className="row d-flex align-items-center mt-4 mb-4">
  <div className="col">
    <MovieListHeading heading="PEPESEARCH" />
    <MovieListHeading subheading="Search Movie Here" />
  </div>
  <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
</div>

[rishilahoti99]

yes search got stacked also XD

[rishilahoti99]

that worked now i will try to make it more beautiful

[rishilahoti99]

@lasjorg @partum how should i get rid of this space in screenshot

[rishilahoti99]

@lasjorg @partum
and when hovering over the poster scroll is popping because the container cant fit that poster, i want the container to be large so that no scroll should be there

[lasjorg]

If you want the container to be full width use the container-fluid class, not container.

Is this all your own code? Because the point of the container you have for the posters might be a horizontal scroll container. If so, the horizontal overflow is intentional, you can hide it so you do not see the scroll bars using overflow: hidden. It is like an image carousel where you click a button on either side to scroll through the images.

Otherwise, you can just let the images wrap using flex-wrap

row flex-wrap justify-content-center

Or you can use grid and create your own class for it.

.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  justify-items: center;
}