Team v.2 doesn't render properly!


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 Szymanska staff pro premium 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!

Marta Szymanska staff pro premium 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

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 -->

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?

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!

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
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No