Hi everybody, 👋
I found placing the circles as background images to be challenging 😥, as I used a few media queries to make them respond to varying screen sizes. 🤷♂️
If I've missed anything or you think I could do something better, please let me know. I appreciate your feedback. 🥰
😊 Happy codding!
Hello Darrick,
To save you the hassle of writing media query for the background, try something like: background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg"); background-position: right 50vw bottom 40vh, left 50vw top 50vh; background-repeat: no-repeat;
Feedback on my code please - is there anything i could improve on?
One question i did have was why i had to do overflow:hidden on the .card-section class to show the border-radius - can anyone explain this please?
Because it's the parent container and you set border-radius of 8px on it, which will allow the child content to overflow.
Hello everybody! This was my first challenge here, was a little bit confused if I should have done 2 versions - mobile and desktop - since in the figma file they both had the same measures.
I had 2 things that I couldn't do well: Situation 1: making the footer stay in it's place, no matter the screen size. Example - when I switched to another smaller size, a scrolling bar appeared.
Situation 2: margins - I learned that if two margins of elements next to each other is the same size, the margins "overlap", they don't add together - yet, on my file, they were adding to each other. Example - the bottom margin of the blue square and the top margin of the first text, they were both adding, creating a total of 48px margin, instead of 24px - is there an explanation for this? The margins shouldn't add together, right?
Not sure if this is the best way to make this text, but it was my first time! :)
Hello Mariana,
Good job on your first challenge. I've looked at your solution and came with some ideas to help you.
Let's redo the spacing to simplify the code and make it more responsive:
These should make the page responsive and you shouldn't see a scrollbar.
Let me know if you have further questions.
Any feedbacks are welcome! I used sass, js and css grid for this project. I have a question though: what is the common number of different screens which I have to adapt my projects?
Very good job on the responsiveness! I don't think there's a fixed number of screens. I believe that it depends on each project, especially when there's no strict requirement for some of these projects. I think the short answer is aside from the provided design, layout, spacing, and overall feel play into how you decide to do the media query.
Hello, Frontend Mentor community! This is my solution to the QR code component.
I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are still free to download or use the code for reference in your projects but I longer update it or accept any feedback.
Thank you
Hello Catherine,
I like how you added the shadow box. It looks more interesting. I also like how you set the width for qr-container. I was inspired to play with width: min(80%, 20rem), which looks more responsive to me. Anyway, just some thing to share with you.
I had trouble centralizing horizontally using flexbox. Flexbox Froggy helped a lot, but the relationship between containers and items is still a little fuzzy. Should I use the "display: flex;" statement in every class, or just on the container? Is the page itself a container?
Hello Victor,
To center the card, add these to the body:
The body is like a container itself. You don't need to use flex in every class. Think in terms of parent and child. For the child to center inside the parent, the parent needs to be a flex container.
Hey guys!
This is one of the craziest projects I've worked on! :) Nothing prepared me for what was about to unfold with this seemingly simple project :D
Initially, this was supposed to be a straightforward Newbie-level challenge from Frontend Mentor. As far as I can tell, this must've been the simplest and easiest design for a Frontend Mentor challenge. Including the project setup (files, folders, etc), finishing this project required less than 30 minutes.
From what started off as ~25 minutes project, it ended up into a min full-stack project that spanned across hours and used multiple technologies (some of which I was either completely unfamiliar with or was still learning)
There's still some tweaking I'd like to make to it, but for the time being, I think the project is good enough to be reviewed by you guys!
Here are the technologies / tools I've used for it:
Special thanks to @ApplePieGiraffe, @darryncodes, and @skyv26 whose works have really inspired me to keep growing as a developer!
Thanks a lot for checking out my project and see you in the next challenge!
This looks amazing and very inspirational!!
Hello everyone! Any feedback would be much appreciated. I had some difficulty with placing the background images but I think they turned out ok. If there is an easier way to accomplish the positioning, I'm open to hearing about it. Thanks again for any feedback to help me continue refining my skills!
Hello Brandon, For the background images, try: background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg"); background-position: right 50vw bottom 40vh, left 50vw top 50vh; background-repeat: no-repeat;
i dont know how to use github well as of now hence i cant host it
Hello Ankitha, To host on GitHub, try this (if you haven't changed the repository structure):
Hi All
Would appreciate feedback on this please.
On the wrapper i did max-width: 22rem and width: 90% but did not seem to work if did max-width:20rem and width:90% because when i did this the width became to small it was c280px instead of c320px per the design.
Can someone explain this to me? I still got the width right but would like to know why i had to do 22rem instead of 20rem for this would to work.
Any other feedback on my code would be appreciated please.
Hello LiBee, Well done on this challenge! It seems like after you modified the html and css file, you didn't update your solution in frontend mentor portal, so width: 90% is not showing up when I checked the website. Because you set max-width to 20rem, which is already very narrow, I don't think setting width of 90% actually matters for responsiveness.
Small difficulty with the margins between the cards: with flexbox, i have the feeling that the margins add up between the cards.
Hello Francis, You solution looks pretty good! To help with your margin issue, try this:
Hello everyone, please let me know if you have any comment about my code. I have tried to do this as responsive as i could. I have some questions:
Hello Rodrigo, to make this responsive on smaller screens I would suggest using flexbox for this challenge. Using flexbox allows you also to avoid using float (no longer recommended). To answer your questions, it may be okay to use many divs, but it's best practice to use meaningful tags, as div tag has no meaning. For example, in your code, you could use <main></main> for the container, and <footer></footer> for the footer. It's okay to put a div inside another one. Overall, limiting the use of div tag is preferred. You can learn more about the tags here https://www.w3schools.com/tags/tag_main.asp
