React responsive title over a carousel slide


Topic: React responsive title over a carousel slide

Brandon Matthews asked 7 years ago

Hello all, I\'m having trouble placing a title over the first carousel slide, and having it be responsive like the rest of the page. Can someone help? This is what I came up with. Or can someone point me to the example code for the full page image carousel? There doesn\'t seem to be one.....This is the code I have right now.
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://mdbcdn.b-cdn.net/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 7 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 commented 7 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 7 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, Kuba

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No