Navbar doesnot fit the screen size on mobile view in react-bootstrap

HTML-CSS
1 
<Navbar  collapseOnSelect expand="lg" bg="dark" variant="dark" className='space '>
      <Container >
        <Navbar.Brand className='text-size'>IMDB</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link as={Link} to={"/"}>Home</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>

Above is a simple navbar thati have created using react-bootstrap. The navbar fits the screen properly in large screen sizes but in small screen size it shrinks itself.

image

I tried different approaches that are available online like width:100%, max-width instaed of width but it doesnot seems to work.

It would be nice if someone explains me the problem. Thanks in advance.

2

Is it possible to give us more than what you pasted above? Can we get a link to the actual project? It’s hard to know what the problem is without being able to look at the whole thing.

3

Sorry, for the late reply. Here is the github link: Movies-App/movies_app/src at master · Anshuman2510/Movies-App · GitHub

4

The problem I am having with your app is not that the top menu bar doesn’t stretch all the way across (it does), but rather that it is not responsive when you narrow the browser in, so I am getting a horizontal scroll bar after a certain point. This is caused by two things:

  • The table you are using can only narrow so far. Tables are not responsive by default.
  • You have a min-width of 10rem set on the left .mw column

You might think about switching from a table to something else for narrow view ports so that the content can narrow. For the genre picker, you might think about switching to a menu button for narrow view ports.

1 Like
5

@bbsmooth thank you so much the problem is solved now. The navbar covers the entire width on all screen sizes. The problem was rightly pointed by you the whole problem lied in the table not responsive and the card list on the left side having a min-width of 10rem which made it non responsive.

The following changes lead to the solution:

  1. In the MoviesTable.js file i applied "responsive=“md” (it is a react-bootsrap class) on the Table tag(“Movie table”) which caused the table to scroll horizontally on the small screen size.

  2. In the Genre.js file i applied “d-none d-md-block d-xl-block” class on the “Card tag” (“the card which is present on the left side of the screen”) which made the " Card" hide for all screen sizes except on medium and large devices.

6

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