Best Practices question: I used pixel values for everything because it appeared that the QR code content wouldn't change with the size of the viewport. Is there anything wrong with this approach? Should I use some other unit instead?
Ayoife
@AyoifeAll comments
- @JordanKisielSubmitted about 2 years ago@AyoifePosted about 2 years ago
Wow!!, This is the first solution for this challenge I've seen that matches the design perfectly and you did it without Figma right?!!, Nice work!
0 - @dayerlin-bustamanteSubmitted about 2 years ago@AyoifePosted about 2 years ago
Hi @Dayerlin Bustamante, Congrats on completing this challenge!!
It looks really good and I like the way you made yours unique by using red instead of a green color for the button and the header, Nice work. But I couldn't help to notice that the font family of your solution wasn't the same with that in the design. I checked your code and I found out that the problem was the
@import
statement. The@import
statement on the first line of your css was not correct because,- Firstly, all links/urls should be contained in an
url()
function, therefore the url specified is actually visited - And secondly, the link in the
@import
statement is going to take you where the font is located on the Google Fonts website and returning nothing to your css but what you should have done was to scroll to where you could find the styles of the font family(in this case Manrope, and a font weight of 800) and then selected it and then copied the@import
statement it provided at the bottom right of the page to your css.
But to solve the problem, just replace the
@import
statement in your css with this :@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap');
which I got from the Google Font website.But apart from that, your site was absolutely amazing, keep it up!!
0 - Firstly, all links/urls should be contained in an
- @mavix21Submitted about 2 years ago
Hi, Frontend Mentor community! 🙋♂️ This is my very first project using SASS/SCSS and my first submit on Frontend Mentor. Any feedback would be appreciated! 😁
- @JudasThePriestSubmitted about 2 years ago
I found it difficult/intimidating to make the page properly viewable on mobile. My main concern is that, when my page is viewed from the devtools mobile viewport on Firefox, the screen height is needlessly big and requires unnecessary scrolling to view the QR code properly. I ended up reaching out to a friend who is more experienced in coding than I, and he assured me that the page would be properly viewable on an actual phone screen.
What I'd like feedback on is whether I succeeded in making the page comfortably viewable on mobile, and if my friend is correct about viewing it by phone.
Thank you so much :)
@AyoifePosted about 2 years agoHi @Galen, Congrats on completing your first challenge!!
I viewed your site from my phone and I found out that there was still some vertical scrolling, but if it makes you feel any better, I checked the mobile design for the challenge and there was also some vertical scrolling. But the main thing is that the users should be able to view the QR-Code Component properly which the solution you submitted passed but if you want to be finicky, then you can consider reducing the width and height of the
card
class to that of the design in the project folder and probably solve the scrolling problem. I hope I was of a little help and I hope to see many more completed challenges from you :)Marked as helpful2 - @cosmoartSubmitted about 2 years ago
Any feedback is welcome :D
@AyoifePosted about 2 years agoWow!!, this solution left my mouth wide-open, Absolutely amazing!!
1 - @catherineisonlineSubmitted over 2 years ago
Hello, Frontend Mentor community! This is my solution to the Calculator App.
I appreciate all the feedback you left that helped me to improve this project. I fixed the issues I had previously and added new features per your recommendation.
I have done this project a while ago however if you are here and have any feedback, tips, or ideas to share, I will be more than glad to hear them out!
Thanks
- @AyoifeSubmitted about 2 years ago
Really enjoyed working on this solution, but was a little bit of work trying to make it responsive. But as always, any feedback on the solution is much appreciated :)
- @KTrick01Submitted about 2 years ago
Hi! I wanted to feel a spike in difficulty, so I left my junior challenges for a while and went for an advanced challenge, and I have to say that it was pretty fun to make, I definitely want to do more projects like this (though there's just one more free advanced challenge i think 😥)! I learned a LOT of Vue doing this challenge, actually I think I spent more time watching tutorials and reading documentation than anything else, my solution it's far from perfect so I will be trying to optimize the code. As always any feedback is welcome!
@AyoifePosted about 2 years agoNot giving this solution a like ♥️♥️ should be a crime 😂😂. I would have given it a 100 likes if I could ☺️☺️. Thumbs Up! 👍👍
2 - @RausalaaSubmitted about 2 years ago
- How can i put the attribution div to the extreme bottom of the page
@AyoifePosted about 2 years agoNice solution @Salaudeen, and about your question, the way I did mine was by adding a 'position' property to that 'attribution' class and setting it to 'fixed' then setting the 'bottom' property to zero. I hope I was of help to you :)
Marked as helpful0