Help With Image Size for Cards

Topic: Help With Image Size for Cards

Christopher Stuart free asked 6 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?

Add comment

Marta Wierzbicka staff answered 6 years ago

2 0 Best answer

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 6 years ago

you're awesome marta thanks! sending now

Add comment

MDBootstrap staff answered 4 years ago

0 0 Best answer

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

Add comment

MDBootstrap staff answered 4 years ago

0 0 Best answer

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

Add comment

infin80 free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Marta Wierzbicka staff answered 4 years ago

0 0 Best answer

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

Add comment

sergeysh free answered 4 years ago