1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Cards and Pictures in cards.

jivancic pro asked 6 years ago

How can I make the 3 or more cards to have exactly same height and width in all screen sizes .. I have issues the pictures inside the cards resizing themselves when I resize the browser window and causing cards to be not aligned at bottom .

Marta Wierzbicka staff answered 6 years ago

Hi guys, do you need more help from our team? Best, Marta

Marta Wierzbicka staff answered 6 years ago

Hi,

is Ollie Vincent's answer right for you jivancic?

Best,

Marta

Ollie Vincent pro answered 6 years ago

You could try this code from this link. I saved it onto Google Drive because it is really quite useful 🙂 https://docs.google.com/document/d/1DHTM9t47YjivqsLcC1XQT6F3onwyP2fwph6nU54c0No/edit?usp=sharing   Put JS in footer. In this example the class is js-equal-height. Paste this into all your elements that you want the same height.

.jodadev. pro commented 6 years ago

When i write the script into the footer, half appears white and the other grey, as if is only accepting half of it. Any idea why? is that normal? I thought everything in the script is supposed to appear grey. Thanks

Ollie Vincent pro commented 6 years ago

In this doc i have Javascript, CSS and html... only copy the JS tags. Is that your issue?

.jodadev. pro commented 6 years ago

I copied the JS Script and wrote it in the Footer, but the text itself appears half white (until the part it says 'for (i=0; i <' ) and the rest appears grey. It works well though, just wondering if is normal cause everything i have in scripts appears grey other than that.

.jodadev. pro commented 6 years ago

But thank you so much it works perfectly!!! you're my hero!!! thank you, thank you, thank you!! :D

Ollie Vincent pro commented 6 years ago

No problem - as long as it works there shouldn't be a problem :) Your code editor should say if you have a syntax issue though... Glad it works :)

Marta Wierzbicka staff answered 6 years ago

Hi, could you show me any demo presenting the problem? I'll try to help you. You can also read this part of our documentation, maybe it also helps you: https://mdbootstrap.com/layout/bootstrap-equal-height-columns/. Best, Marta

jivancic pro commented 6 years ago

Hi Marta , for example have a look on your page : https://mdbootstrap.com/sections/e-commerce-sections/

jivancic pro commented 6 years ago

or Have a look at the page : https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/jquery/tutorials/bootstrap/tutorial-1/3/index.html and if I change the the image on the first card , my new image size is not keeping same like in other cards and distorting the alignment with other cards and visually looking horrible . Hope I could explain ?

Marta Wierzbicka staff commented 6 years ago

These pages don't have set equal columns properties.
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
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
jivancic
Pro User -3Support score
11Questions 0Answers 1Snippets