How can I make these cards proportionate to eachother? - Material Design for Bootstrap

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.)

Add comment

Grzegorz Bujański staff answered 10 months ago

0 0 Best answer

Please insert min. 20 characters.

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 10 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 10 months ago

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

BradleyByerly04 priority commented 10 months ago

Not seeing it anywhere.

BradleyByerly04 priority commented 10 months ago

Not seeing it anywhere.

Kamila Pieńkowska staff commented 10 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 10 months ago

That doesn't seem to of worked either.

BradleyByerly04 priority commented 10 months ago

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

BradleyByerly04 priority commented 10 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 10 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 10 months ago

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

Add comment

Write

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

cards

About author

BradleyByerly04

0Support score
12Questions 2Answers 6Snippets