My main question is:
What do you guys do when you get stuck ? I for example got pretty stuck on the overlay component for when the image is hovered over. I simply copy pasted a solution I knew would work from stack overflow and just left it there. What can I do to turn that into a learning experience and how would you guys approach a similar problem.
Hello GCWDEV’S, Welldone on completing a project here! I think you are on the right track because we all get stuck, good thing is you are seeking help! So for the hover, what i suggest is make it visibility hidden then on hover it would be visiblity: visible; I recently completed this challenge as well you can check out my code here https://github.com/tchydy/nft-preview-card-component-main Hope this helps you. Happy coding!
Feedback is welcome
Hello Ahmad, Welldone on completing this project. As per feedback you may want to set width and height to your body, main and content. For instance style the body like this, body{width: 100%; height: 100vh; background-color: #0d192b; position: relative; font-family: 'Outfit', sans-serif} add the font family 'outfit' to the body's css styiling, as well as in the head of your HTML code.
Set main to the center of the body and give it specific width and height also don't forget to use the specified colors provided in the style guide. Here I used the hex values. main{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 350px; height: 600px; background-color: #14253d} With these changes it should look better. Keep up the good work!
Well done on completing the challenge!! You did an awesome job. Everything looks really close to the project solution. One thing you may want to update is your pattern background display. Going through your code everything looks right just add a width and height to your body, width: 100%; height: 100vh; This would keep the pattern background well positioned no matter the screen size. Hope you find this helpful! Stay coding!
Getting the right background image for this task was a little difficult for me.
Hello Helene, You really did well with the project. I know how it can feel to have one tiny thing go wrong with your code. But I am glad I can help you out on this becaue I just finished this challenge as well. Here is what I did. In the HTML file inside the main container I added a div with class bg-pattern to be postion: absolute; while the container was postion: relative; Next in CSS for desktop I set the class .bg-pattern: url(./images/pattern-background-desktop.svg) no-repeat; while for mobile I used another background. You view my Live site here https://tchydy.github.io/order-summary-component-main/ Hope you find this helpful! Stay Happy, Stay Coding!
Hello, well done on completing the project. Your code seems complete but your design is not showing on the solution. I think you may want to include a readme file that includes screenshots. You can also edit the readme template in the downloaded project folder. Another step is to also generate screenshot after uploading this file(readme file). I think making this adjustments would be great so others can appreciate your hardwork better. Hope this helps you.
• Is media queries the only way to make it responsive?
Hello, welldone on completing the project. In my little experience media queries are recommended for responsive web design but you can check this article out https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design for more methods asides media queries and how they can be implemented. Hope this helps you.
