having problem with margins

i applied margin on the card then why is it effecting its parent element i dint understand can someone explain i think i forgot how margin works
<div class="container">
<div class="leftContainer">
<div class="cardFront">
<div class="cardDetails">
<img src="./images/card-logo.svg" alt="">
<p class="cardNumber">0000 0000 0000 0000</p>
<div class="cardName">
<p>JANE APPLESEED</p>
<p>00/00</p>
</div>
</div>
</div>
<div class="rightContainer"></div>
</div>
<div class="container">
<div class="leftContainer">
<div class="cardFront">
<div class="cardDetails">
<img src="./images/card-logo.svg" alt="">
<p class="cardNumber">0000 0000 0000 0000</p>
<div class="cardName">
<p>JANE APPLESEED</p>
<p>00/00</p>
</div>
</div>
</div>
<div class="rightContainer"></div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Space Grotesk', sans-serif;
}
.body{
font-size: 18px;

}
.container{
min-height: 100vh;
}
.leftContainer{
background-image: url('../images/bg-main-desktop.png');
min-height: 100vh;
width: 30%;
margin: 0;
}
.cardFront{
background-image: url("../images/bg-card-front.png");
min-height: 13rem;
border-radius: 0.4rem;
width: 25rem;
background-size: cover;
margin: 4rem;
}
.cardDetails img{
margin: 1.5rem;
}
.cardNumber{
margin-top: 1rem;
color: white;
font-size: 1.4rem;
text-align: center;
word-spacing: 0.6rem;
letter-spacing: 0.2rem;
}
.cardName{
display: flex;
justify-content: space-between;
font-size: 1rem;
align-items: center;
margin: 1rem 2rem;
color: white;
}
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Space Grotesk', sans-serif;
}
.body{
font-size: 18px;

}
.container{
min-height: 100vh;
}
.leftContainer{
background-image: url('../images/bg-main-desktop.png');
min-height: 100vh;
width: 30%;
margin: 0;
}
.cardFront{
background-image: url("../images/bg-card-front.png");
min-height: 13rem;
border-radius: 0.4rem;
width: 25rem;
background-size: cover;
margin: 4rem;
}
.cardDetails img{
margin: 1.5rem;
}
.cardNumber{
margin-top: 1rem;
color: white;
font-size: 1.4rem;
text-align: center;
word-spacing: 0.6rem;
letter-spacing: 0.2rem;
}
.cardName{
display: flex;
justify-content: space-between;
font-size: 1rem;
align-items: center;
margin: 1rem 2rem;
color: white;
}
No description
17 Replies
megaByte
megaByte•14mo ago
so when you are setting a margin from a child element, in your case you would be actually overflowing the parent div. So you should use overflow:hidden in your leftContainer. A better practice would be to use padding:3rem in your parent div, and no margin property for your cardFront I have solved this challenge in Frontend Mentor, I would advise that you design the page for Mobile first, then the desktop. You will get a better idea of how your html and css should be structured in the best way so that it is responsive
Anonymous DEV
Anonymous DEV•14mo ago
i finished mine can u take a look at it? and give me any suggestions if needed and also can i c ur code? https://frontend-mentors.web.app/interactive-card-details-form-main/index.html
megaByte
megaByte•14mo ago
Frontend Mentor
Frontend Mentor | Responsive, made with TailwindCSS and React (need...
mihirbhatkar's front-end solution for the Interactive card details form coding challenge on Frontend Mentor
megaByte
megaByte•14mo ago
As for suggestions, you havent actually implemented a confirm submit button. What needs to happen is the user should fill the form and they need to click on 'Confirm' button, which on successful submitting of form shows a message saying Thank You. I think this was mentioned in the problem itself. My solution is in React. But you can implement same thing in plain Javascript too As for your Css i think it is fineđź‘Ť
Anonymous DEV
Anonymous DEV•14mo ago
i totally forgot about it
megaByte
megaByte•14mo ago
lol
Anonymous DEV
Anonymous DEV•14mo ago
i never saw it doing that before what makes my case special
megaByte
megaByte•14mo ago
I think what is causing that to happen is because your background container and card are sticking by default so when you increase your margin from the inner card, it also disrupts the box model of outer container too. Well im no expert either so my reasoning may be wrong. Css is hard af. So just use padding instead 🫡
Anonymous DEV
Anonymous DEV•14mo ago
agreed it always surprises u
megaByte
megaByte•14mo ago
yep
Anonymous DEV
Anonymous DEV•14mo ago
done
Anonymous DEV
Anonymous DEV•14mo ago
Frontend Mentor
Frontend Mentor | i used flexbox and media querries and position ab...
unknown951258563465335's front-end solution for the Interactive card details form coding challenge on Frontend Mentor
Anonymous DEV
Anonymous DEV•14mo ago
No description
Anonymous DEV
Anonymous DEV•14mo ago
why m i having these warnings should i ignore them or should i know what these are?
megaByte
megaByte•14mo ago
nice! for more improvements i would say make it all the way responsive. it should look good for all screen sizes
megaByte
megaByte•14mo ago
for example it is not good for this screen size
No description
megaByte
megaByte•14mo ago
nah just ignore them, i also get those warnings
Want results from more Discord servers?
Add your server