How to remove empty space in React and Bootstrap 5

Question

I'm writing a pet project that needs to be mobile responsive and I have a problem with white space in the Carousel component, I don't know how to remove it, can someone help me?

This is looks like page on PC https://i.sstatic.net/ql0FO.jpg

This is looks like mobile devices https://i.sstatic.net/FXR25.jpg

And I want to remove the empty space at the bottom, make the carousel responsive, how can I do that?

Here is my component code

import ...

export default class CarouselBox extends Component{
    render(){
        return(
            
                <Carousel>
                    <Carousel.Item>
                        <img className="d-block w-100"
                        src={edinburghView1}
                        alt="Edinburgh_Uni"
                        />
                    <Carousel.Caption>
                        <Nav.Link href='/EdinburghCity'>
                        <h3>Edinburgh city</h3>
                        <p>Edinburgh city view in 2023</p>
                        </Nav.Link>
                    </Carousel.Caption>        
                    </Carousel.Item>
                                
            
        )
    }
}

Here is my Footer component

import { MDBFooter } from 'mdb-react-ui-kit';

export default class Footer extends Component {
    render() {
        return (
            <>
    <MDBFooter sticky="bot" bgColor='light' className='text-center text-lg-left' class="fixed-bottom">
      <div className='text-center p-3' style={{
         backgroundColor: '#f8f9fa', 
         marginTop: '0.5%' }}>
        &copy; {new Date().getFullYear()} Copyright:{' '}
        <a className='text-dark' href='https://t.me/koreechdhs'>
          Boiar Kostiatyn
        </a>
      </div>
    </MDBFooter>
            </>
        )
    }
}

Answer 1

I'm somewhat confused what you mean by:

I want to remove the empty space at the bottom, make the carousel responsive, how can I do that?

I'm assuming the red area here you're talking about?

That is because, you have

sticky="bot"

in:

<MDBFooter sticky="bot" bgColor='light' className='text-center text-lg-left' class="fixed-bottom">

which is doing exactly what you want.

If you want the carousel to be full height you will need to add that in the component at that viewport size, reference sizing