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
17 Replies
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 responsivei 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
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
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đź‘Ť
i totally forgot about it
lol
i never saw it doing that before what makes my case special
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 🫡
agreed
it always surprises u
yep
done
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
why m i having these warnings
should i ignore them or should i know what these are?
nice! for more improvements i would say make it all the way responsive. it should look good for all screen sizes
for example it is not good for this screen size
nah just ignore them, i also get those warnings