Topic: How can I make these cards proportionate to eachother?

BradleyByerly04 priority asked 10 months ago


Expected behavior Cards are same height Actual behavior Cards vary based on the amount of text in card-text Resources (screenshots, code snippets etc.)

Snippet


Grzegorz Bujański staff answered 10 months ago


You can force their height to depend on the height of the parent element

.card {
  height: 100%
}    

But in this case, the height of the cards in the first row will not be the same as the height of the cards in the second row. A better solution is to set the height for all cards depending on the width of the browser. E.g. like this:

@media (max-width: 1400px) {
  .card {
    height: 250px;
  }
}
@media (max-width: 1200px) {
  .card {
    height: 300px;
  }
}
@media (max-width: 992px) {
  .card {
    height: 200px;
  }
}

BradleyByerly04 priority commented 10 months ago

Neither of these even affect my cards.


Grzegorz Bujański staff commented 10 months ago

Check out this snippet https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5887292 It looks like everything is working as it should


BradleyByerly04 priority commented 10 months ago

Error 404. Looks like it might not be public.


Grzegorz Bujański staff commented 10 months ago

Sorry about that. Try now


BradleyByerly04 priority commented 9 months ago

Maybe I'm overlooking something? I made a new css file and linked it to the html sheet I'm working on and pasted that into it, was there something else I was supposed to be doing?


Kamila Pieńkowska staff commented 9 months ago

No, that sholud be enough. Please check in the developer tools whether styles you've added are applied.


BradleyByerly04 priority commented 9 months ago

Not seeing it anywhere.


BradleyByerly04 priority commented 9 months ago

Not seeing it anywhere.


Kamila Pieńkowska staff commented 9 months ago

Then maybe try adding a style tag in the head of your html file and copying those custom styles there.


BradleyByerly04 priority commented 9 months ago

That doesn't seem to of worked either.


BradleyByerly04 priority commented 9 months ago

Okay, nevermind. It is working, my main monitor is just larger than the widths


BradleyByerly04 priority commented 9 months ago

And the reason the css file wasn't working was because the directory I had it drawing from didn't exist.


BradleyByerly04 priority commented 9 months ago

Is there a list of average screen sizes by pixels? Having issues with it looking good on certain screen sizes and being either too tall or too short on other screen sizes.


Kamila Pieńkowska staff commented 9 months ago

Here is example article: https://testsigma.com/blog/common-screen-resolutions/#Top_10_most_common_screen_resolutions



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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: PC
  • Browser: Opera GX 104.0.4944.80
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: Yes
Tags