I need help figuring out how to override React Bootstrap's carousel. I made a post a few hours ago here. To summarize, I wanted to create a fullscreen header image that scales appropriately on mobile.
The red shows the original image boundary, and the blue is the mobile viewport. The intended effect being the image isn't actually scrollable outside of the viewport, and instead has a fixed size and "zoomed-in" view on a smaller screen.
After taking in the feedback from my first post, I came to realize the issue lies entirely with React Bootstrap.
I went back to the drawing board and commented out all <Carousel> components, and just had my Home component return a rendered <div> with the following class configuration:
function Home() {
return (
<div className="firstImage"></div>
// <Carousel fade>
// <Carousel.Item interval={5000}>
// </Carousel.Item>
// </Carousel>
);
}
-------------
.firstImage{
background-image: url('../../public/images/home/banner/img1.JPG');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
This gives the desired effect on both desktop and mobile
Now let's toss this <div> in the <Carousel> component.
function Home() {
return (
<Carousel fade>
<Carousel.Item interval={5000}>
<div className="firstImage"></div>
</Carousel.Item>
</Carousel>
);
}
Now, this happens on Desktop. The image is no longer visible, it disappears off the viewport, and the Carousel toggles are way up by the Nav Bar. It doesn't matter if I modify the CSS styling to just be the background image and height modifier. It all produces the same behavior.
.firstImage{
background-image: url('../../public/images/home/banner/img1.JPG');
height: 100%;
}
The Carousel is just a container, right? Why is this happening? Clearly some styles are being overwritten/clashing with the default behavior. I would appreciate any help. Thanks.
