Kevin Powell - Community•16mo ago

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;
}

17 Replies

megaByte•16mo 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 DEVOP•16mo 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•16mo ago

https://www.frontendmentor.io/solutions/responsive-made-with-tailwindcss-and-react-need-suggestions-iGx1IBWVyw Here is my solution

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•16mo 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 DEVOP•16mo ago

i totally forgot about it

megaByte•16mo ago

lol

Anonymous DEVOP•16mo ago

i never saw it doing that before what makes my case special

megaByte•16mo 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 DEVOP•16mo ago

agreed it always surprises u

megaByte•16mo ago

yep

Anonymous DEVOP•16mo ago

done

Anonymous DEVOP•16mo ago

can u take a look at it again and tell me what this ishttps://www.frontendmentor.io/solutions/i-used-flexbox-and-media-querries-and-position-absolute-ZF_eXlfe0C

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 DEVOP•16mo ago