Carlos Revettiâą 90
@Cdrn19
Submitted
I want to know some Box-shadow guide?
P
Jessica
@perezjprz19
All comments
- Adam Elitzurâą 110
@AdamElitzur
Submitted
Is there anything that I should be doing differently? Maybe with the units, is it bad to hardcode in 25 ems just because it looks right?
So your image is actually huge on my phone and I think that is because you hard coded the width and the height, so it's not adjusting to my screen size and it's overflowing.
Could you try playing around with max-width instead of width?
I also didn't add a height to mine. I let the content in the card decide the height.
Marked as helpful
1 - Higor Costaâą 210
@higor-costa
Submitted
Aceito feedback sobre o projeto.
- Em quais pontos eu devo melhorar?
- Pontos positivos e negativos?
VocĂȘ Ă© muito bem-vindo!! Fico feliz em poder ajudar.
Marked as helpful
0 - Adriana Silva Almeidaâą 50
@Adriana2710
Submitted
Hello everyone! I've just completed the "QR code component" challenge and to be honest I don't know what I did wrong but looks like the size of the page is different. I'm a newbie in Front End, just finished one course of HTML5 and CSS basics, if someone has some time could you please give some tips on what I did wrong, any feedback and suggestions on how I can improve are very welcome!
Hmm... your solution looks great. Just try giving the body
height: 100vh; display: flex; justify-content: center; align-items: center;Marked as helpful
1 I feel like to be production ready this solution would require some cleanup and a bunch more data validation and error checking. Do people usually spend a lot of time on that kind of thing in these challenges?
Everyone is at different levels in their learning journey, but with that being said, you get out of these challenges what you put in to them, In my opinion.
Eventually these challenges will be used to make it easier for us to find jobs through the creation of the hiring platform. So if that's your goal, then I'd recommend making sure your solutions are as good as you can make them.
If that's not your goal, other coders might still see your submitted code and use it as a learning resource. So that's something to consider I think.
Marked as helpful
0- Danielâą 110
@xBuzAx
Submitted
Hi,
This is my second project made with frontend mentor and I am very satisfied.
Do you think I could improve something? Write, comment. I will accept any criticism :)
The color for the attribution is illegible, so you might want to consider changing the color since they would not meet accessibility standards.
I would recommend using opacity and mix-blend-mode to get the color of the overlay closer to the design.
Marked as helpful
1 - -_RIkkaâą 140
@devsimocastles
Submitted
what do you think about my solution? I'd accept any feedback
đ
Looks good, but I think you need a bit of margin around your card so that it doesn't touch edges. Card touches top and bottom sides on mobile.
Marked as helpful
1 - Ezraâą 10
@ezraisnotadev
Submitted
Hi there,
I feel I fumbled my way to the solution (i guess that's how you learn right). Any suggestions on how I could make the design responsive?
Thanks
đ
I used max-width for the card and the image, rather than giving it an explicit width value.
0 - M. Rahman Wafiq Ghaziâą 170
@Rahmanwghazi
Submitted
Hey there! đ it looks like the link to your code isn't working. Also adding a little bit of padding to the bottom of the card will give it a little more space between the text and the edge of the card, as in the design.
Overall, good job!
0 - tâą 70
@newbloom
Submitted
I don't know if I'm using media queries correctly. Should I be building the bulk of my CSS for mobile purposes, and then creating a media query with the necessary changes to the CSS for desktop view? Or should I have individual queries for each?
I'm not sure I've implemented the desktop to browser switch effectively.
That's they way I do it, at least. I build all my code for mobile and then start increasing my viewport width slowly. When things start to look weird, I tweak my code and add media queries of necessary.
Marked as helpful
0 - Tobiasâą 100
@ToHX
Submitted
Hi everyone,
I'm not completely happy with my card-shadow. I did use a website (https://getcssscan.com/css-box-shadow-examples) for that but you can see that on the QR Code img it doesn't fit.
Apart from that, I was this time much faster in building my solution as this is my 2nd project. :)
Hi ToHX!
I think your shadow looks fine based on the challenge comparison. However, the card does touch the edges of my phone screen so I can't really see the shadow. Some margin could help with that.
Marked as helpful
0 - Achmad Riyadiâą 70
@AchmadRiyadi
Submitted
Still a newbie and learning. Any feedback is welcomed
Your project looks good. Keep up the good work!
0 - Luca Toniâą 80
@shavedhead
Submitted
Let me know what you think! I had a lot of trouble with the background images. Let me know what I could have done better. Thank you for your responses!
The background images were the bane of my existence last night. I was up until 3am trying to get them right because they were creating a bunch of overflow. đ€Ł
Ultimately, instead of positioning them in relation to the viewport, I absolutely positioned them in relation to the card and used the translate property to get them on the opposing corners.
I still have some overflow, but not as much. The best solution? Probably not. The prettiest? Eeeeh, nah.
I think your solution looks good, but I can't see your background bubble images on my phone very well, so maybe they still need some work. I saw other people using fixed positioning to get them were they wanted and I thought that worked well too.
Marked as helpful
0 - Claire Sersunâą 40
@clairesersun
Submitted
In this solution I used media queries to alter the width and placements of the content sections. Is there another way to do that with flex?
I haven't done this challenge yet, but that looks a like a lot of media queries for what this is. I think I would approach this layout a little differently.
-
I would start by coding for a very small viewport.
-
I would probably use min(), max(), or clamp() to keep the width responsive as I grow my viewport.
-
only add a media query when things start to break... if absolutely necessary. I don't think you'll need as many considering it only grows up to a certain size
-
I think flexbox would work with this... I think possibly displaying the entire container as a flex column. Wrapping the Two bottom sections in their own div within the container and displaying it as a flex row...
As I said I haven't tested this, but if you do try it, let me know what you think.
0 -
- Arnab-Biswasâą 70
@Rex-Arnab
Submitted
When should we use Padding and When Should we use margin, as I think using margin just breaks the flow
đHi!
[This article might helpful in choosing when to use padding vs margin]
(https://medium.com/frontendshortcut/margin-vs-padding-c1fc8ea8bfaf)
Marked as helpful
1 - Linkâą 20
@WEBdevDOR
Submitted
What you think? first challenge ever :)
Hi!
Good job completing your first challenge ever!
The card is a little too big on my phone screen though and extends a bit outside of the viewport when loaded, creating a little bit of horizontal scrolling. Not using fixed values might help with that.
Marked as helpful
1 - Abdellah el aajjouriâą 190
@abdellahelaajjouri
Submitted
Hi Guys, What is the best practice to make your website responsive ? I think that media query is not very practical for me . Let me know please! Thank you all .
Hi! @abdellahelaajjouri
I didn't looked at your code and saw that you added two media queries.
I started mine mobile first, as you did. However, I only used one media query.
My process:
I start the simulation for a very small device, such as the galaxy fold.
I add all my HTML with semantic tags only adding and only adding divs where needed for styling.
In the CSS I start working from the inside out, so fonts and colors and then container. I used flex or grid depending on the project to place items within the container.
I remind myself the browser already has some responsiveness built in.
I try to avoid using fixed widths as much as possible and don't usually add a height. I use min() and max().
In responsive mode, I slowly increase my window size adjusting the values for min() max() as I go where needed.
Then if things start to break I use a media query.
I remind myself that with the challenges, we don't know how it should look at every size, so long as it still looks nice In the sizes in between, I don't worry too much.
I don't know how to avoid media queries entirely, and sometimes go media query crazy as I try to patch things up đ€Ł but I think my process is helpful most of the time.
Marked as helpful
0 - Sakib Ahsanâą 30
@SakibAhsan7
Submitted
Hi @SakibAhsan7 đ
Good job with your solution. I just have a couple of pointers:
-
it is best to separate your css from your html file for maintainability and scalability. Not a big deal with the smaller projects, but it would be good to get into habit.
-
since "cancel order" is an interactive element, it should be either a link or a button.
Happy coding! đ
Marked as helpful
0 -
- Ehab Joeâą 110
@huhu0000
Submitted
I thought it would be hard but I can tell it was easy and I had a short funny time coding it so any feedback ?!
Hey your implementation looks great, but It looks like you forgot to use <main> which is causing a lot of accessibility errors to show up in your report.
I'd work on cleaning up your report and then you should be good.
Good work with this project. I'm glad you found it easy and had fun doing it.
1 - Louise Norrsén⹠140
@louisenorrsen
Submitted
Feedback are very welcome! Plese tell me what I do good and bad so I can become better :)
Hi @louisenorrsen,
I think your solution looks good. The only thing I could suggest is maybe changing your attribution div for a footer, but that's a pretty minor update.
Good work with this solution!
0 - Akshay Panmalkarâą 10
@technofactory
Submitted
@technofactory
Aside from the validator errors, I think your solution looks good. Plus, I learned about margin-block-start and margin-block-end.
Thank you
0 - Nathanael Bonfimâą 10
@nathabonfim59
Submitted
After coding the UI for the challenge: "What if I could dynamically generate QR Codes of my own?" This is the result of that idea.
Also, I had to change the design a little. Although the QR Code container was really great-looking, my phone didn't recognize because there wasn't enough contrast.
Any feedback is appreciated. I figure that's the best way I can improve my skills.
@nathabonfim59
Wow! very nice! I like what you did with it :-)
1 - Iulian Carnaruâą 190
@iuliancarnaru
Submitted
Hi @iuliancarnaru!
Aside from your accessibility issues noted in the report, I think your solution looks pretty good!
Nice job!
0 - JĂșlia Nunesâą 30
@CuriouslyHappy
Submitted
Did I do something that would be better doing another way?
Ok, so just finished work and it looks fine on my end on most screen sizes (aside from the whole card not being centered).
In regard to your error report and to elaborate on what @Crazimonk said...
The web has standards that need to be met so that it is accessible for all users. Semantic tags such as main, header, h1-h6 are all part of that.
Marked as helpful
1
