I made some card using grid and flexbox for the content. The image is not the same size each cards. I use the display grid for the wrapper and flexbox for the card content. I tried to use flex-grow and flex-basis in the trackcard_header class, but nothing works. I attach the sample of my code result below, please take a look to the snippet too.
Here is the screenshot:
And this is my snippet:
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
max-width: 100%;
height: auto;
border-radius: 1rem;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
I want to make the images is in the same size, both vertically and horizontally. Could anyone give me solution? Thank you in advance.
You need to give the divs an actual size, in your code, they only have % values and no parent static value to take the %age out of. I've given the .trackcard class a width of 30vw. In order to make the images square, you also need to give it a height that's not dependent on other height values, but have the same value as the width, so I gave it a placeholder of 24vw which is 80% of the .trackcard. You need to use object-fit: contain to not stretch. You can refer to the docs I linked and use the one you prefer.
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 30vw;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
width: 24vw;
height: 24vw;
object-fit: contain;
border-radius: 1rem;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
That can be achieved with some JavaScript.
First you select all the elements with querySelectorAll. You then make an array of its height with offsetHeight. Math.max returns the largest sum of the input parameter.
In a for loop, you can set the elements minHeight with Math.max. It keeps looping until it finds the length and then applies the styling. Keep in mind this will apply the height of the largest image as min-height on all of your images.
And while we're at it, I did the same thing for the h2-elements, so they're aligned equally in all the cards. I separated the JS so it is easier to read and understand. The only gotcha is you have to reload the page if you drag the screen size, as the min-height will be a bit off.
As for CSS I used grid-template-columns: repeat(5, minmax(200px, 1fr)); instead. This way there will always be 5 columns that are atleast 200px wide, so they have an equal size. If you want a responsive effect, just edit the 5 out with auto-fit, this way they will wrap on smaller screens.
Like so:
grid-template-columns: repeat(5, minmax(auto-fit, 1fr));
If you want to change the width or height of your images, I suggest using max-width and max-height for a responsive effect. If you don't change the width, they will look a bit stretched.
You can apply object-fit: cover; on the images also, this way the image won't be stretched, but a bit of the image will be cut off instead.
I hope this helps you!
Snippet below will not work properly, check Codepen: https://codepen.io/sigurdmazanti/pen/qBpLGXe
let img = document.querySelectorAll(".trackcard_header img");
let text = document.querySelectorAll(".trackcard_body h2");
// Image
let imgLength = Array.from(img).map(e => e.offsetHeight);
let maxLength = Math.max(...imgLength);
// H2
let textLength = Array.from(text).map(e => e.offsetHeight);
let maxTextLength = Math.max(...textLength);
// Image for loop
for (let i = 0; i < img.length; i++) {
img[i].style.minHeight = maxLength + "px";
}
// H2 for loop
for (let i = 0; i < text.length; i++) {
text[i].style.minHeight = maxTextLength + "px";
}
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
/*grid-template-columns: repeat(5, 1fr); */
grid-template-columns: repeat(5, minmax(200px, 1fr));
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
max-width: 100%;
height: auto;
border-radius: 1rem;
/* Consider this */
object-fit: cover;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
margin-top: auto;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a" alt="name" />
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247" alt="name" />
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1" alt="name" />
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff" alt="name" />
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6" alt="name" />
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
Related
I'm trying to add a bootstrap footer to my project. It works well on the big screen but when you start scaling down the screen, the footer is placed in the middle of the page instead of the bottom. What am I doing wrong?
#media only screen and (max-width: 1150px) {
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
}
<div class="bigcontainer">
<div class="box1">
<h3>RENOVATIONS</h3>
<p><br /></p>
<p>
At <em>Razca Designs</em>, we specialize in interior renovation design, from small kitchen updates to complete home remodels. We have a wealth of experience and expertise in creating personalized spaces that reflect our clients’ unique styles and
personalities.
</p>
<p><br /></p>
<p>
Our team will work closely with you every step of the way to bring your project to completion. We take the time to fully understand the specific challenges and pain points of each client in their current home, and use this information to design a tailor-made
solution that addresses each individual need. Our approach is to provide you with a beautiful and functional home that you’ll love spending time in
</p>
<p><br /></p>
<b><em>Our passion is creating personalized, welcoming spaces that are tailored to you and your family. With Razca Designs, you can trust us to transform your home into a space that exceeds your expectations</em></b>
</div>
<div class="box2">
<img src="textimages/reno10.jpg" alt="" class="img-fluid" />
</div>
<div class="box3">
<img src="textimages/renov-3.jpg" alt="" class="img-fluid" />
<img src="textimages/ren101.jpg" alt="" class="img-fluid" />
</div>
<div class="box4">
<h3>RENOVATIONS</h3>
<p><br /></p>
<ul class="ab">
<li>
Reviewing permits or managing permit applications if necessary
</li>
<li>reate the neceesary drawings, including:</li>
<p>Existing and demolition plans</p>
<p>Proposed plans</p>
<p>Construction plans</p>
<p>Electrical plans.</p>
<p>Furniture Plans</p>
<li>
Providing materials and finishes according to your design palette
</li>
<li>Design of custom furniture</li>
<li>Requesting quotes; ordering and coordinating deliveries</li>
<li>Dealing contractors and craftsmen</li>
<li>Dealing with suppliers and overseeing quality control</li>
<li>
Final design steps, like finishes and confirming forniture and cabinetery.
</li>
</ul>
</div>
</div>
<!-- Footer -->
<footer class="text-center text-lg-start bg-white text-muted">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->
<!-- Right -->
<div>
<a href="" class="me-4 link-secondary">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3 text-secondary"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Products</h6>
<p>
Angular
</p>
<p>
React
</p>
<p>
Vue
</p>
<p>
Laravel
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Useful links</h6>
<p>
Pricing
</p>
<p>
Settings
</p>
<p>
Orders
</p>
<p>
Help
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p>
<i class="fas fa-home me-3 text-secondary"></i> New York, NY 10012, US
</p>
<p>
<i class="fas fa-envelope me-3 text-secondary"></i> info#example.com
</p>
<p>
<i class="fas fa-phone me-3 text-secondary"></i> + 01 234 567 88
</p>
<p>
<i class="fas fa-print me-3 text-secondary"></i> + 01 234 567 89
</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.025)">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- Carousel wrapper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
Here is my screen shot
I was able to figure out what I was doing wrong
.bigcontainer {
display: flex;
flex-wrap: wrap;
width: 98vw;
align-items: center;
margin: 20px;
font-family: "sans";
margin-left: 150px;
}
.bigcontainer::after {
width: 98vw;
position: absolute;
z-index: -1;
right: 0;
}
.bigcontainer > div {
width: 50%;
height: 50%;
padding: 18px;
}
.box1 {
margin-bottom: 20px;
}
.box3 {
display: flex;
gap: 10px;
}
.box3 img {
width: 45%;
height: 30rem;
}
.box2 img {
width: 70%;
}
#media screen and (max-width: 908px) {
.bigcontainer > div {
width: 100%;
height: max-content;
flex: 0 0 100%;
}
.bigcontainer {
display: flex;
flex-wrap: wrap;
width: 98vw;
align-items: center;
margin: 20px;
font-family: "sans";
padding: 15;
margin-left: 0;
margin-top: 150px;
}
.text-container {
width: auto;
margin-bottom: auto;
}
.testing {
width: auto;
margin: auto;
}
.box2 {
order: 4;
}
.box2 img {
width: 100%;
height: 100%;
}
.box3 {
flex-wrap: wrap;
}
.box3 img {
width: 100%;
}
.box2 img {
width: 100%;
}
.bigcontainer::after {
display: none;
}
}
.box1 {
font-family: "sans";
line-height: 150%;
}
.box4 {
font-family: "sans";
line-height: 150%;
}
h3 {
font-size: 18px;
font-weight: bolder;
}
.box4 h3 {
padding-left: 15px;
}
.imge-4 {
width: 100px;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
.text-container {
width: 600px;
margin-bottom: 90px;
}
.testing {
width: 600px;
margin-left: 20px;
}
#media screen and (max-width: 568px) {
.bigcontainer > div {
width: 100%;
height: max-content;
flex: 0 0 100%;
}
.bigcontainer {
display: flex;
flex-wrap: wrap;
width: 98vw;
align-items: center;
margin: 20px;
font-family: "sans";
padding: 15;
margin-left: 0;
margin-top: 150px;
}
.testing {
width: auto;
margin: auto;
}
.text-container {
width: auto;
margin-bottom: auto;
}
.box2 {
order: 4;
}
.box2 img {
width: 100%;
height: 100%;
}
.box3 {
flex-wrap: wrap;
}
.box3 img {
width: 100%;
}
.box2 img {
width: 100%;
}
.bigcontainer::after {
display: none;
}
}
so im doing a front end challenge and basically i gotta do this and half way through images to move the images but i cant seem to make the cut/overlap
```
:root {
--clr-bggrad-violet: hsl(273, 75%, 66%);
--clr-bggrad-blue: hsl(240, 73%, 65%);
--clr-text-dark: hsl(238, 29%, 16%);
--clr-text-red: hsl(14, 88%, 65%);
--clr-divider: hsl(240, 5%, 91%);
--ff-kumbh: 'Kumbh Sans', sans-serif;
}
/* "*" helps the code to be vieweble on all broswers */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
font-family: var(--ff-kumbh);
font-weight: 400;
font-size: 0.8rem;
color: var(--clr-text-dark);
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
background: linear-gradient(var(--clr-bggrad-violet), var(--clr-bggrad-blue));
}
main {
position: relative;
background: url(images/bg-pattern-mobile.svg) no-repeat top center;
background-color: white;
display: flex;
flex-flow: column nowrap;
align-items: center;
border-radius: 1rem;
padding: 1rem;
width: 100%;
margin-bottom: 1rem;
box-shadow: 0 10px 40px -15px var(--clr-text-dark);
}
.title {
padding: 1rem;
margin: 1rem;
font-weight: 700;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
height: auto;
display: block;
}
.hero-images {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
align-items: center;
margin-bottom: 7rem;
}
.hero {
position: absolute;
top: -7rem;
width: min(80%, 255px);
}
.box {
display: none;
}
#media (min-width: 900px) {
main {
width: 870px;
display: grid;
grid-template-columns: 50% 50%;
background-image: unset;
background-color: white;
padding: 0;
}
.hero-images {
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
background-image: url(images/illustration-woman-online-desktop.svg),
url(images/bg-pattern-desktop.svg);
background-repeat: no-repeat;
background-size: 90%, 120%;
background-position: -4.8rem 5rem, -12rem -2rem;
margin: unset;
}
.box {
width: 150px;
position: absolute;
display: unset;
top: 12rem;
left: -5.5rem;
z-index: 1;
}
.hero {
display: none;
}
}
```
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | FAQ Accordion Card</title>
</head>
<body>
<main>
<picture class="box">
<img src="images/illustration-box-desktop.svg" alt="TheBox" aria-hidden="true" />
</picture>
<section class="hero-images">
<picture class="hero">
<source media="(max-width: 900px)" srcset="images/illustration-woman-online-mobile.svg"
alt="you see this first" />
<img src="images/illustration-woman-online-desktop.svg" alt="ShrinkUseeThis" aria-hidden="true" />
</picture>
</section>
<section>
<h1 class="title">FAQ</h1>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
How many team members can I invite?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
You can invite up to 2 additional users on the Free plan. There is
no limit on team members for the Premium plan.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
What is the maximum file upload size?<img src="images/icon-arrow-down.svg" alt="IconArrow"
aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
No more than 2GB. All files in your account must fit your allotted
storage space.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
How do I reset my password?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Click “Forgot password” from the login page or “Change password”
from your profile page. A reset link will be emailed to you.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Can I cancel my subscription?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Yes! Send us a message and we’ll process your request no questions
asked.
</div>
</div>
</div>
<div>
<button class="btn dropBtn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Do you provide additional support?<img src="images/icon-arrow-down.svg" alt="IconArrow" aria-hidden="true" />
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Chat and email support is available 24/7. Phone lines are open
during normal business hours.
</div>
</div>
</div>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button"
aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2"
aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse"
aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both
elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is
hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is
hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js"
integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk"
crossorigin="anonymous"></script>
</body>
</html>
```
i have tried to use krita and just crop and upload the images as one but it loses resolution(it looks pixelated).i have been thinking using the bodyBG and make that a png but the white box is there in the middle.
edit2: so the images were in .svg couldnt uploaded to imgur so i have to change it to .png i think i might have scramble the snippet cuz the images are everywhere sorry it is my first time doing this XD. also i tried the left: -15%;width: 50%;height: auto; and nothing happen
this is what i see on my computer:
compu
edit3: so i found out about content-visibility CSS and i am trying to see that instead of a cut i will try to make the image half invisible
edit4: so it was "picture" HTML i found a guy that use it on the challenge i cant find him anymore and i still dont understand how is making the cut butt it works sooooo whatever thx anyway
From *ngFor loop I can populate images but I want to add a button below the image or on the image. I'm not familiar with CSS below is my code.
Html code
<div class="container">
<div *ngFor="let img of imageData">
<p [hidden]="true">{{img.Id}}</p>
<img class="original" [alt]="img.Name"
src="https://localhost:44349/{{img.ImagePath}}"
width="350" height="350"/>
<button type="submit" (click)="deleteImage()" class="btn btn-danger"><i
class="far fa-trash-alt"></i>
Remove
</button>
</div>
</div>
CSS
.container {
position: relative;
text-align: center;
}
.original {
width: 250px;
height: 250px;
float: left;
margin: 1.66%;
transition-duration: 0.3s;
border-radius: 15px;
}
Hope this is what you are looking for.
.container {
/* position: relative;*/
text-align: center;
display: flex;
flex-direction: column;
}
.original {
width: 250px;
height: 250px;
float: left;
margin: 1.66% auto;
transition-duration: 0.3s;
border-radius: 15px;
}
.content {
display: flex;
flex-direction: column;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="content">
<p>Image Id</p>
<img class="original" src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" width="350" height="350" />
<button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
Remove
</button>
</div>
<div class="content">
<p>Image Id</p>
<img class="original" src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" width="350" height="350" />
<button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
Remove
</button>
</div>
</div>
For angular with dynamic image your template will be like.
<div class="container">
<div class="content" *ngFor="let img of imageData">
<p [hidden]="true">{{img.Id}}</p>
<img class="original" src="https://localhost:44349/{{img.ImagePath}}" width="350" height="350" />
<button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
Remove
</button>
</div>
</div>
I have created a table of divs with CSS that is made up of parent rows and child rows, but I want the child rows to make them visible or to hide with the help of vuejs. My problem is not how to make them visible / hidden, how to properly align parents with children.
In my example the child row should fit between parent row two and three, but the child row is displayed above the parent row with the number three.
In the example below the irregularities can be seen much better in full screen mode.
Thanks!
.div-table {
display: table;
width: 100%;
table-layout: auto;
font-size: 12px;
color: black;
}
.div-table-head {
display: table-header-group;
background: #e5e5e5;
vertical-align: middle;
}
.div-table-body {
display: table-row-group;
vertical-align: middle;
}
.div-table-tr {
display: table-row;
}
.div-table-th {
display: table-cell;
font-weight: 700;
text-transform: uppercase;
border-bottom: 3px solid #666;
}
.div-table-td {
display: table-cell;
border-bottom: 1px solid #e5e5e5;
}
.div-table-th, .div-table-td {
padding: 6px;
}
.div-table-tr:nth-of-type(odd) {
background: #f8f8f8;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.div-table-tr:hover {
background: #ffd;
}
.my-material-icons {
font-size: 13px;
color: gray;
cursor: pointer;
}
.col-span {
position: absolute;
padding: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.1/css/uikit.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<div class='div-table'>
<div class='div-table-head'>
<div class='div-table-th' style="width: 3%">#</div>
<div class='div-table-th' >th2</div>
<div class='div-table-th' >th3</div>
</div>
<div class='div-table-body'>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>1 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td12</div>
<div class='div-table-td'>td13</div>
</div>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>2 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td22</div>
<div class='div-table-td'>td23</div>
</div>
<!-- child -->
<div class='div-table-tr'>
<div class='div-table-td col-span'>
<div class='div-table'>
<div class='div-table-head'>
<div class='div-table-th' style="width: 4%">#</div>
<div class='div-table-th' >th2</div>
<div class='div-table-th' >th3</div>
</div>
<div class='div-table-body'>
<div class='div-table-tr'>
<div class='div-table-td'>1 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td12</div>
<div class='div-table-td'>td13</div>
</div>
<div class='div-table-tr'>
<div class='div-table-td'>2 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td22</div>
<div class='div-table-td'>td23</div>
</div>
</div>
</div>
</div>
</div>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>3 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td32</div>
<div class='div-table-td'>td33</div>
</div>
</div>
</div>
Firts of all instead of use div labels to build a table you should use the vuejs markup https://v2.vuejs.org/v2/examples/grid-component.html
Issue: So vertical alignment issue is I have two divs in the last column and I'm trying to get one to stay at top and one to stay at the bottom regardless of how the central column grows. I can work this out by using fixed heights but that's no good in this case.
Here is my code example : JS Fiddle
HTML:
<div class="row" class="property-bundle"><!-- (x) number of these -->
<div class="col-xs-11 wrapper">
<div class="row">
<div class="col-xs-2 pull-left vendor">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-xs-8 properties-list">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 1</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 2</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 3</p></div>
</div>
</div>
<div class="col-xs-2 costs"><!-- costs column -->
<div class="row total">
<h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top-->
</div>
<div class="row" class="fees"> <!--stay at bottom-->
<div class="col-xs-12">
<hr/>
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.wrapper {border: 1px solid black; padding: 10px; margin: 15px;}
.vendor {min-width: 120px;}
.properties-list {background-color: aquamarine}
.costs {vertical-align: top; min-width: 150px; vertical-align: center}
.fees {vertical-align: bottom; }
h3 {font-weight: 400}
h4 {color: green}
.total { margin-right: 0px; }
Hi you can try using flexbox
I just change your html like this:
<div class="col-xs-2 costs">
<!--stay at top-->
<div class="total">
<h3 class="text-right">TOTAL: £1,2M</h3>
</div>
<hr/>
<div class="materials">
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
Then I add on costs div display:flex;and on total div flex-grow: 1 This flex-grow will push materials on bottom of div.
You just need to add on body, html, row and costs div height:100%
Here is css:
.costs {
vertical-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.total {
flex-grow: 1;
}
You can see example on this link: https://jsfiddle.net/3L5Lbwhn/9/
Ok I simplified this a bit, but essentially flex did what I needed so many thanks to Edin Puzic for putting me on the right lines! It also allowed me to fix the 1st and last col width and make the middle one dynamic horiontally too.
JsFiddle
<div class="row-flex">
<div class="col-flex-1">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-flex-2">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 1</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 2</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 3</p>
</div>
</div>
</div>
<div class="col-flex-3">
<div class="pos-top">
<div class="row right-text">
TOP right
</div>
</div>
<div class="pos-bottom">
<div class="row right-text">
<p>
BOTTOM right
</p>
</div>
</div>
</div>
</div>
CSS
.row-flex {
height: auto;
display: flex;
flex-flow: row column;
}
.col-flex-1 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.col-flex-2 {
width: 80%;
border-left: 1px #ccc solid;
flex: 1 1;
}
.col-flex-3 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
background-color: lightgrey;
}
.pos-top {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-start;
align-items: flex-start;
background-color: yellow;
}
.pos-bottom {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-end;
align-items: flex-end;
background-color: green;
}
.right-text {
text-align: right;
width: 100%;
}