Topic: Not able to see MDBCarouselItem contents in small view

chalicham priority asked 5 months ago


**it should show the caption in small view i.e less than 768px, which inclues iphone 12

**it works will till 770px after that the button in the MDBCarrouselItem dissppears, i tried various options in the api with all combinations of Screen size Class Hidden on all .d-none Hidden only on xs .d-none .d-sm-block Hidden only on sm .d-sm-none .d-md-block Hidden only on md .d-md-none .d-lg-block Hidden only on lg .d-lg-none .d-xl-block Hidden only on xl .d-xl-none Hidden only on xxl .d-xxl-none Visible on all .d-block Visible only on xs .d-block .d-sm-none Visible only on sm .d-none .d-sm-block .d-md-none Visible only on md .d-none .d-md-block .d-lg-none Visible only on lg .d-none .d-lg-block .d-xl-none Visible only on xl .d-none .d-xl-block .d-xxl-none Visible only on xxl .d-none .d-xxl-block

also tried to override with .custom-carousel-button.d-none { display: block !important; /* Use !important to ensure it overrides the MDBCarousel styles */ } nothing workedenter image description here

Please see the screanshot which is taken from desktop and mobile , mobile view doesn't have the button,CUSTOMIZE where desktop view has it , , please help **

Resources (screenshots, code snippets etc.)

  <MDBCarouselItem style={{ 


  backgroundSize: 'contain', // Ensure the background image contains the container
}} 
    className='carousel-item-custom rounded img-fluid '
    itemId={'Every Decision Matters'}
    src='https://opengrit.com/images/SaaSPromotional'    
    alt='...'
  >

   <MDBBtn className="carousel-caption bg-success text-white bg-opacity-75 d-block custom-carousel-button" onClick={() => setIsLoginRequired(true)}> 
      <h3>Every Decision Matters</h3>

    </MDBBtn>
    {/* <div className="bg-success text-white bg-opacity-75 carousel-caption  d-xs-block">  <h3>Every Decision Matters</h3></div> */}

  </MDBCarouselItem>

  <MDBCarouselItem style={{ 


  backgroundSize: 'contain', // Ensure the background image contains the container
}}
       className='carousel-item-custom rounded img-fluid '  
    itemId={'Scan or Upload'}
    src='https://opengrit.com/images/scanupload1.png'
    alt='...'
  >

  <MDBBtn className=" bg-success text-white bg-opacity-75 d-block" onClick={() => setIsLoginRequired(true)}> 
      <h3>Scan or Upload</h3>

    </MDBBtn>

  </MDBCarouselItem>

Mateusz Lazaru staff answered 5 months ago


I answered you in the other topic, but I'll also copy the answer here to make it easier to find:

It's default behavior to hide caption on mobiles, in order to change it, you would need to override styles by adding the following CSS:

.carousel-caption {
  display: block !important;
}


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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 6.3.0
  • Device: desktop
  • Browser: chrome
  • OS: linux
  • Provided sample code: No
  • Provided link: No