@peanutbutterjlly
Posted
hey 👋,
good job completing the solution.
I've got a few suggestions to help your style look a little better on desktop/mobile.
get your form with a class of card and remove the 70vh (makes it a little tall on desktop) - the height can be set by the content in the card/form. Also, you can remove the width: 40% on your media query from the .card as well.
.card {
//remove the height: 70vh;
// remove width: 40% from @media (max-width: 40%);
padding-boddom: 2.5rem;
// add the padding-bottom to help give space to the button
}
besides that, good job. keep up the good work!
@vivekrajput-93
Posted
@peanutbutterjlly Thank you..brother for your feedback and I'll take that into consideration.
@vivekrajput-93
Posted
@peanutbutterjlly ... Once Thank you..steve..and I have made the changes..Do you mind if I ask doubt , the thing is the card looking normal in my desktop but when I saw it in the screenshot comparison to solution, it showing the card have unnecessary height.Why is that ??
@peanutbutterjlly
Posted
@vivekrajput-93
I noticed it because I'm using a fairly big monitor - maybe when the screenshot is generated it's simulating a 'large' monitor as well.
To help you simulate different monitor sizes, you can use the responsive options (look in the dev tools) in whatever browser you're using to see how they look on different screens, no matter what size browser you happen to be developing in.
DevToolsTips: simulate devices
the link above shows how to do so; seems like its targeted for mobile development but you can set the pixels to be quite large too. here's another article (specific to chrome dev tools but the entire article is good for responsive design in my opinion).
hope this helps!
@vivekrajput-93
Posted
@peanutbutterjlly Once again thank you steve... and please be supportive for my upcoming projects...It's my honour to learn from you.
@peanutbutterjlly
Posted
@vivekrajput-93
for sure; I am just a regular dev though, not too special.
thanks for the kind words!
