I couldn't add an alert for when you submit your email address in the form because that apparently requires JS, which I haven't learned yet.
And If the screen is bigger than 1440px for desktop, which my laptop is bigger than that, the curved sections become partially hidden. Would I need to add queries for sizes in the middle of mobile and desktop and bigger than desktop?
For the registration forms and the various messages (whether you have to enter email, pass, etc. etc.) it is all in the correct form setup in the HTML. Try "Registration Form" in CodeCamp.".
Still working on the mobile view. Don't know why it is not working. Anyone has a suggestion?
Not perfect, but better
@media only screen and (max-width: 1200px) {
body {
height: auto;
flex-direction: column;
padding: 0 50px;
}
body .container {
display: flex;
flex-direction: column;
}
The only issue I'm having is that this challenge looks different in Chrome versus Firefox. In Firefox, the "content-wrapper" container has all the grid items squished together. Using Dev Tools, it appears the issue may be with grid-template-columns. I don't know if I should add Mozilla-specific code, which I'm not familiar with so I have no idea of where to go with that, or could it be something else in my code that's affecting that? Feedback is welcome as always!
Here's my Code Pen too: https://codepen.io/imtheheppest/pen/oNEajab
One piece of advice I was given that I was also getting wrong until now is that when setting the grid, the dimensions should not be set. Neither to the fathers nor to the children. Everything must be relative.
My footer area in mobile view will not stay at the bottom and moves when I scroll. If I remove the stylings to "attribution" class, it will stick to the right of the card div. That's the only issue I had besides the color for the overlay in desktop view. I would like to fix the footer, though.
Try not putting any position, by default it stays at the bottom, try so:
footer .attribution {
color:hsl(0, 0%, 100%);
font-size: 0.7778em;
}
I think arranging the content inside of grid was the most challenging part. Talking about the media queries i am not sure why image is not appearing in the background and whenever i decrease the width of the tab my content gets scatter in weird manner. If someone has any solution regarding this , feel free to reply .
No grid is needed in this challenge, just 2 different flexboxes. One is the main container, and the other where the icons are. Ultimately you have 2 elements, you use the grid if you have more. The way I see the challenge, then there are 1000 ways to get to result.
As a person who is new to coding, I would like advice to following questions:
Basically it is like this - * {margin: 0; padding: 0; box-sizing: border-box;}. Before writing the code you should help yourself with a graphics program, to see the dimensions and some spaces, I use Inkscape (free). For fonts, padding, marging it is best to use the units rem or em
All feedback is welcome
I don't understand why you can't see the image. Can anyone help me?
