Help With Image Size for Cards

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Help With Image Size for Cards

Christopher Stuart 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 Szymanska staff pro premium 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 commented 7 years ago

you're awesome marta thanks! sending now

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

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

infin80 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

MDBootstrap staff pro premium priority 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 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

MDBootstrap staff pro premium priority 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

Write
Create snippet
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: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Christopher Stuart
10Support score
5Questions 1Answers
0Snippets likes 0Snippets