Looking to hire developers?
@hcxweb
@DarrickFauvel
Submitted
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!
@hcxweb
Posted
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;
Marked as helpful
@Li-Bee
Submitted
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?
@hcxweb
Posted
Because it's the parent container and you set border-radius of 8px on it, which will allow the child content to overflow.
Marked as helpful
@mariana-c-ramos
Submitted
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! :)
@hcxweb
Posted
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.
Marked as helpful
@rodrigovn
Submitted
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?
@hcxweb
Posted
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.
Marked as helpful
@catherineisonline
Submitted
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
@hcxweb
Posted
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.
Marked as helpful
@victoralbenor
Submitted
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?
@hcxweb
Posted
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.
Marked as helpful
@Miculino
Submitted
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!
@hcxweb
Posted
This looks amazing and very inspirational!!
Marked as helpful
@walker861
Submitted
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!
@hcxweb
Posted
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;
Marked as helpful
@ankithapai
Submitted
i dont know how to use github well as of now hence i cant host it
@hcxweb
Posted
Hello Ankitha, To host on GitHub, try this (if you haven't changed the repository structure):
@Li-Bee
Submitted
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.
@hcxweb
Posted
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.
@FrancisKhaledKhodja
Submitted
Small difficulty with the margins between the cards: with flexbox, i have the feeling that the margins add up between the cards.
@hcxweb
Posted
Hello Francis, You solution looks pretty good! To help with your margin issue, try this:
Marked as helpful
@rodrigovn
Submitted
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:
@hcxweb
Posted
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
@DanK1368
Submitted
Again, I appreciate any general comments and feedback!!
If you notice, there is no hover state on the social media icons. I had trouble with this part. My initial thought was to place the svg code directly into the html, and then edit its fill color in CSS. However it was not working. The code looked like this:
svg:hover { fill: pink; } However, it didn't change it's color. Any help on this is much appreciated :)
@hcxweb
Posted
Hello DK, I experimented with your social media svg file, and I think the problem may be due to the property of that particular style. You see how your svg files look like the inverse of those in the original design. I recommend using icons from font awesome and see if that helps.
@mariangavlytskiy
Submitted
I had problems with background images and still don't know how to set their position properly. if you know how to set their position correctly for different screen with less efforts, please tell me🙏
@hcxweb
Posted
Marian, You can give this a 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
sorry, I'm not sure how to make the code look formatted
@emilunageo
Submitted
Well I'd like to know if there is better way to fit the background or that's the correct...
@hcxweb
Posted
Hi Emiliano, You can give this a 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
sorry, I'm not sure how to make the code look formatted
Marked as helpful
