@MioMauro
@laceeder
Submitted
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?
@MioMauro
Posted
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.".
Marked as helpful
@claire-conrardy
Submitted
Still working on the mobile view. Don't know why it is not working. Anyone has a suggestion?
@MioMauro
Posted
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; }
@laceeder
Submitted
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
@MioMauro
Posted
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.
Marked as helpful
@laceeder
Submitted
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.
@MioMauro
Posted
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; }
@inumaki
Submitted
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 .
@MioMauro
Posted
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.
@CBID2
Submitted
As a person who is new to coding, I would like advice to following questions:
@MioMauro
Posted
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
Marked as helpful
