fix card elements size to same html+Scss+javascript
I have the following requirement:
where image, name and button are regular size, but mine looks odd and irregular. See this:
Codepen link is: https://codepen.io/anisharya16/pen/vYLzNMj
How can I fix this to be responsive and regular card size, there should be no changes to HTML? Need Help.
I am using HTML, SCSS, Vanilla Javascript
Apply below css to card title min-height: 60px;
.cards-item__card--title { font-size: 28px; min-height: 60px;} 
Some solutions:
You can define a maximum height with max-height
You can set the paragraph to not break the line with white-space: nowrap;
For very large names, you can define a "…" so that the name does not go beyond the card’s div, using overflow: hidden; and text-overflow: ellipsis;
Apply the following rules:
.cards-item__card--title { display: flex; min-height: 60px; align-items: center; justify-content: center; font-size: 1.667em; text-overflow: ellipsis; } Demo
You can use template literals to simply your rendering.
const config = { url: 'https://api.randomuser.me', numberCards: 12, genderMale: 'male' } render(config) function render(config) { const url = `${config.url}?results=${config.numberCards}&gender=${config.genderMale}` fetch(url) .then(response => response.json()) .then(apiResponse => { // Output API response to console to view. //console.log(apiResponse.results); // Card Implementation var myapp = document.querySelector('.card__wrapper'); myapp.innerHTML = renderCards(apiResponse.results); }) } function renderCards(users) { return ` <ul class="card__wrapper__maincontent"> ${users.map(renderCard).join('')} </ul> ` } function renderCard(user) { return ` <li class="card__wrapper__maincontent__cards-item"> <div class="cards-item__card"> <img class="cards-item__card--image" src="${user.picture.large}" alt="lorem ipsum" style="width:100px;height:100px"> <p class="cards-item__card--title"> ${user.name.first} ${user.name.last} </p> <a class="cards-item__card--cta">Call</a></div></li> ` }:root { --background-color: #eee; --text-color: #333; --card-background: #fff; --card-cta-background: #e26d00; --card-cta-color: #fff; --default-spacing: 20px; } // default styling *, *:after, *:before { box-sizing: border-box; } ul { list-style-type: none; } ul li { display: inline-block; } body { background-color: var(--background-color); color: var(--text-color); font-family: Tahoma, sans-serif; margin: 0; padding: 0; } a { text-decoration: none; display: block; } a:hover { text-decoration: underline; } // Card .card__wrapper { display: flex; justify-content: space-between; margin: 0 auto; max-width: 1024px; } .cards-item__card { background-color: var(--card-background); border-radius: 6px; filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2)); padding: var(--default-spacing); margin: var(--default-spacing); text-align: center; } .cards-item__card--image { border-radius: 50%; } .cards-item__card--title { display: flex; min-height: 60px; align-items: center; justify-content: center; font-size: 1.667em; text-overflow: ellipsis; } .cards-item__card--cta { background-color: var(--card-cta-background); color: var(--card-cta-color); border: none; width: 100%; padding: 5px; bottom: 0px; } // New Class .card__wrapper__maincontent { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; margin: 0; padding: 0; } @media (max-width: 450px) { .card__wrapper__maincontent__cards-item { width: 100%; } } @media (min-width: 450px) { .card__wrapper__maincontent__cards-item { width: 50%; } } @media (min-width: 700px) { .card__wrapper__maincontent__cards-item { width: 33.3333%; } } @media (min-width: 1024px) { .card__wrapper__maincontent__cards-item { width: 24%; } }<section> <main class="card__wrapper"></main> </section>
