I have a pet project that requires mobile responsiveness, and I'm encountering an issue with white space in the Carousel component. I am unsure of how to remove it - can anyone provide assistance?
Here is how the page looks on PC: https://i.sstatic.net/ql0FO.jpg
This is how it appears on mobile devices: https://i.sstatic.net/FXR25.jpg
I would like to eliminate the empty space at the bottom and make the carousel responsive. How can I achieve this?
Below is the code for my Carousel component:
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>
)
}
}
And here is the code for 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%' }}>
© {new Date().getFullYear()} Copyright:{' '}
<a className='text-dark' href='https://t.me/koreechdhs'>
Boiar Kostiatyn
</a>
</div>
</MDBFooter>
</>
)
}
}