Topic: How can I make these cards proportionate to eachother?
Expected behavior Cards are same height Actual behavior Cards vary based on the amount of text in card-text Resources (screenshots, code snippets etc.)
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 pro premium priority commented 11 months ago
Neither of these even affect my cards.
Grzegorz Bujański staff commented 11 months ago
Check out this snippet https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5887292 It looks like everything is working as it should
BradleyByerly04 pro premium priority commented 11 months ago
Error 404. Looks like it might not be public.
Grzegorz Bujański staff commented 11 months ago
Sorry about that. Try now
BradleyByerly04 pro premium 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 pro premium priority commented 10 months ago
Not seeing it anywhere.
BradleyByerly04 pro premium 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 pro premium priority commented 10 months ago
That doesn't seem to of worked either.
BradleyByerly04 pro premium priority commented 10 months ago
Okay, nevermind. It is working, my main monitor is just larger than the widths
BradleyByerly04 pro premium 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 pro premium 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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