Topic: React responsive title over a carousel slide
Brandon Matthews free asked 6 years ago
Start your code here<Carousel activeItem={this.state.activeItem} next={this.next} className=\"z-depth-1 mt-0\"> <CarouselInner> <CarouselItemitemId=\"1\"> <View> <imgclassName=\"d-block w-100\"src=\"https://res.cloudinary.com/twenty20/private_images/t_watermark-criss-cross-10/v1461053857000/photosp/b7825630-1df6-4660-96aa-03a544893ce1/stock-photo-emergency-new-york-medical-ambulance-paramedic-b7825630-1df6-4660-96aa-03a544893ce1.jpg\"alt=\"First slide\"/> <Maskoverlay=\"black-light\"> <divclassName=\"row mt-5\"id=\"title\"> <divclassName=\"col-md-12 white-text text-center\"> <h1className=\"display-3 mb-0 pt-md-5 pt-5 white-text font-weight-bold wow fadeInDown\"data-wow-delay=\"0.3s\">NATALIE <aclassName=\"indigo-text font-weight-bold\">SMITH</a> </h1> <h5className=\"text-uppercase pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5 white-text font-weight-bold wow fadeInDown\"data-wow-delay=\"0.3s\">Web developer & graphic designer</h5> <divclassName=\"wow fadeInDown\"data-wow-delay=\"0.3s\"> <aclassName=\"btn btn-light-blue btn-lg\">portfolio</a> <aclassName=\"btn btn-indigo btn-lg\">About me</a> </div> </div> </div> </Mask> </View> <CarouselCaption> <h3className=\"h3-responsive\">Light mask</h3> <p>First text</p> </CarouselCaption> </CarouselItem> <CarouselItemitemId=\"2\"> <View> <imgclassName=\"d-block w-100\"src=\"https://mdbootstrap.com/img/Photos/Slides/img%20(99).jpg\"alt=\"Second slide\"/> <Maskoverlay=\"black-strong\"></Mask> </View> <CarouselCaption> <h3className=\"h3-responsive\">Strong mask</h3> <p>Second text</p> </CarouselCaption> </CarouselItem> <CarouselItemitemId=\"3\"> <View> <imgclassName=\"d-block w-100\"src=\"https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg\"alt=\"Third slide\"/> <Maskoverlay=\"black-slight\"></Mask> </View> <CarouselCaption> <h3className=\"h3-responsive\">Slight mask</h3> <p>Third text</p> </CarouselCaption> </CarouselItem> <CarouselItemitemId=\"4\"> <View> <imgclassName=\"d-block w-100\"src=\"https://mdbootstrap.com/img/Photos/Slides/img%20%28143%29.jpg\"alt=\"Mattonit\'s item\"/> <Maskoverlay=\"black-light\"></Mask> </View> <CarouselCaption> <h3className=\"h3-responsive\">Sopot Beach</h3> <p>Taken june 21th by @mattonit</p> </CarouselCaption> </CarouselItem> </CarouselInner> <CarouselControldirection=\"prev\"role=\"button\"onClick={() => { this.prev(); }}/> <CarouselControldirection=\"next\"role=\"button\"onClick={() => { this.next(); }}/> <CarouselIndicators> <CarouselIndicatoractive={activeItem === 1 ? true : false}onClick={() => { this.goToIndex(1); }}></CarouselIndicator> <CarouselIndicatoractive={activeItem === 2 ? true : false}onClick={() => { this.goToIndex(2); }}></CarouselIndicator> <CarouselIndicatoractive={activeItem === 3 ? true : false}onClick={() => { this.goToIndex(3); }}></CarouselIndicator> <CarouselIndicatoractive={activeItem === 4 ? true : false}onClick={() => { this.goToIndex(4); }}></CarouselIndicator> </CarouselIndicators> </Carousel>
Jakub Strebeyko staff answered 6 years ago
Hi Brandon,
Welcome to the Support Board! We're here to help.
Starting off with the easier question - the carousel is responsive and full-page by default - wrapping it in no container, it spills over the entire available width out there.
When it comes to the title, it all depends what kind of responsiveness you are after. In the code there are numerous RWD classes used, but most of them address vertical padding - please refer to our docs regarding responsive display, sizing, and perhaps other spacing utilities for more info on making elements behave the way you want them do on different viewport widths.
For future reference: to ensure help comes quick and debugging time is short, please double-check that the code you submit is executable and has no exit-artifacts (like, say, backslash). Thanks!
With Best Regards,
Kuba
Brandon Matthews free commented 6 years ago
Thanks Kuba, I got it figured out. Yeah, I noticed after I posted the question that my code was all jankey.Jakub Strebeyko staff commented 6 years ago
Hi Brandon, Happy to hear to figured it out! Was there anything in particular that goofed your code? If yes, feel free to share it here; turns out this board serves as a reference for many front-end developers starting off. Best Regards, KubaFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No