Topic: Team v.2 doesn't render properly!

alvintng pro asked 6 years ago


The Team V.2 pro renders such that the middle photo is extra large and comes out of the column.

Marta Wierzbicka staff answered 6 years ago


Hi, I don't see that problem in the newest 4.5.7 version, so you can do this what Ollie said or update your 4.5.1 package to the newest one. Best, Marta

alvintng pro commented 6 years ago

Thank you!

Ollie Vincent pro answered 6 years ago


Hi,

You are missing the bootstrap class that makes an image responsive. Add the class .img-responsive to your images.

Alternatively, in you CSS, you could add the code img{max-width:100%;} which would do the same thing.


alvintng pro commented 6 years ago

Thank you!

alvintng pro answered 6 years ago


Its exactly the same code as what was on your website. I can't seem to attach a picture of the problem here - do you want to take this to email?

alvintng pro answered 6 years ago


<!-- Section: Team v.2 --> <section class="team-section text-center my-5 container"> <!-- Section heading --> <h2 class="h1-responsive font-weight-bold my-5">Our amazing team</h2> <!-- Section description --> <p class="grey-text w-responsive mx-auto mb-5"> Priod to that, our founder was doing property management for MNCs and Banks in Singapore - she's even taught courses on home cleaning! Trust us, you're in good hands.</p> <!-- Grid row --> <div class="row text-center"> <!-- Grid column --> <div class="col-md-4 mb-md-0 mb-5"> <div class="avatar mx-auto"> <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded z-depth-1-half" alt="Sample avatar"> </div> <h4 class="font-weight-bold dark-grey-text my-4">Maria Kate</h4> <h6 class="text-uppercase grey-text mb-3"><strong>Photographer</strong></h6> <!-- Facebook--> <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-fb"> <i class="fa fa-facebook"></i> </a> <!--Dribbble --> <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-dribbble"> <i class="fa fa-dribbble"></i> </a> <!-- Twitter --> <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-tw"> <i class="fa fa-twitter"></i> </a> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-md-4 mb-md-0 mb-5"> <div class="avatar"> <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="rounded z-depth-1-half" alt="Sample avatar"> </div> <h4 class="font-weight-bold dark-grey-text my-4">John Doe</h4> <h6 class="text-uppercase grey-text mb-3"><strong>Front-end Developer</strong></h6> <!--Email--> <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-email"> <i class="fa fa-envelope"></i> </a> <!-- Facebook--> <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-fb"> <i class="fa fa-facebook"></i> </a> <!-- GitHub--> <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-git"> <i class="fa fa-github"></i> </a> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-md-4 mb-md-0 mb-5"> <div class="avatar mx-auto"> <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="rounded z-depth-1-half" alt="Sample avatar"> </div> <h4 class="font-weight-bold dark-grey-text my-4">Sarah Melyah</h4> <h6 class="text-uppercase grey-text mb-3"><strong>Web Developer</strong></h6> <!--Linkedin --> <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-li"> <i class="fa fa-linkedin "></i> </a> <!-- Twitter --> <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-tw"> <i class="fa fa-twitter "></i> </a> <!--Pinterest --> <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-pin"> <i class="fa fa-pinterest "></i> </a> </div> <!-- Grid column --> </div> <!-- Grid row --> </section> <!-- Section: Team v.2 -->

Marta Wierzbicka staff answered 6 years ago


Hi, I don't see that problem in our documentation. Could you paste here your demo or code presenting the problem? I'll try to help. Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags