Topic: Help With Image Size for Cards

Christopher Stuart free asked 7 years ago


Hi all---i created a row with four cards--with a similar setup to the starter template in the first tutorial.  I want the same size cards, with the same size images.   I'm having a real tough time with the images--as I find they need to be the exact size or the whole card gets misaligned

https://ibb.co/mZ6BhF

Can see a picture of the misalignment---you can disregard everything under the images--as i'm still working on the alignment---but you can see if with the bike and the cheesecake images how just a miniscule difference in size is creating a misalignment of the cards.  Do I need to set a size for the images somewhere to help with this?


Marta Wierzbicka staff answered 7 years ago


Hi, could you send me your fileindex.html to look at this issue to m.szymanska@mdbootstrap.com and I'll help you. Best, Marta

Christopher Stuart free commented 7 years ago

you're awesome marta thanks! sending now

MDBootstrap staff answered 5 years ago


Hi infin,

I edited my snippet for you. I hope it fits your developer needs: https://mdbootstrap.com/snippets/jquery/pjoter-2-0/1205571

Best Regards, Piotr


MDBootstrap staff answered 5 years ago


Hi infin80,

I created a snippet with an example for you to use with your cards on the site you linked to ;)

https://mdbootstrap.com/snippets/jquery/pjoter-2-0/1205571

Best Regards, Piotr


infin80 free commented 5 years ago

Thanks Piotr for quick reply! That's the default code where i started from. Are shadows, flipping, and adding a button underneath the cards within the limitations of MDBootstrap?

With the card flipped, I found it difficult to keep the text responsive while adding padding so the text is not up against the edges. (card image to use: https://www.infin80.com/templates/cabeast2/img/events/w013605.jpg)

BTW I have the latest JQuery Pro version


infin80 free answered 5 years ago


Marta I can use your help w similar issue...

Three vertical images/same size (320x480px) in card format and I'm going for the flipping effect. I'm looking to add some/any kind of hover effect so people know to click. I'll compromise the fancy effects if too tricky.

Can you take a look here? https://www.infin80.com/templates/cabeast2/

Scroll down to "Upcoming Events" and you'll see where I've gotten. It looks close but when responsiveness is invoked fuggetaboutit.

Thank you in advance, David


Marta Wierzbicka staff answered 5 years ago


Hi,

would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/? If you create a demo of your code and describe in details your problem, I really could help you.

Best, Marta


sergeysh free answered 5 years ago


Hi, I have the same problem. The pictures are different, so get my cards (height). What can I do to fix it?



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: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags