Miguel• 40
@notEspagueti
Submitted
This challenge was done in React whit simple functional components
Manish Mandal
@manishdevelops
All comments
- Manish Mandal• 650
@manishdevelops
Posted
hey! congrats on completion of this project. well instead of 👇
.container { margin: 10vh auto; }you should use 👇 . it is going to align contents center wrt the viewport
.root { display: flex; min-height: 100vh; justify-content: center; align-items: center; }hope it adds up to your learning...
1 - Madeleine De Guzman• 70
@deguzmanmadeleine22
Submitted
I encountered the same problem with the nft preview card with overlay not covering the whole image when resizing to other devices. Will try using the suggestion on the other project to fix the issue.
Manish Mandal• 650@manishdevelops
Posted
Hey Madeleine congrats on completion of this project... Do these changes for improvement of your project...
remove element with class .main-img-overlay completely
.main-image-container { background: rgba(170, 92, 219, 0.7); } .main-img { mix-blend-mode: multiply; }Hope it will solve your problem.. keep coding =)
0 - Moumita Dhar• 70
@Mou887
Submitted
I wanted to add some animations for the dropdowns but I am not clear about it yet . I have watched tutorials but things are not clear. If anyone could suggest some resource or tutorial it will be of great help.
Manish Mandal• 650@manishdevelops
Posted
congrats on completion of this project.. coming to your query... I have focused on one of your dropdown , another one you can do yourself I feel
Add this code in the sublist class
.sublist ul { height: 0; overflow: hidden; }now on clicking Features . toggle this classList to ul.
.toggle { height: 163px; transition: 1s; }now after after application , you can see the animation . this is one way of doing .. and with display : none you can not add perform any animation.. If still you have doubt you can see my solution I have done this project.
Marked as helpful
0 - Curtis• 30
@cl8396
Submitted
What heading level selector to use? As it is a standalone component out of the context of a webpage
Do I place a single h1 on the rating state and not the thank you state? Perhaps a h2 on both headers is suitable?
I used a media query to implement the responsiveness for smaller screens (mobile). However, my solution seems to be quite clunky and inelegant. I have to go in and change lots of font-sizes for both states. Is there a better way?
Manish Mandal• 650@manishdevelops
Posted
Hey congrats on completion of this project, your solution looks good to me.. now coming to your query..
level heading <h1> is important because it's going to display your main content of the page so you have to use <h1> but if you don't need <h1> then simply you can set to font-size: 0.
And you don't need to change font-size for every devices you can use clamp() function where it you will be required your min-width , max-width, min-font-size and max-font-size and now some mathematical calcs you have to perform .. Now your font-sizes will adjust itself according to the devices. I am providing you the from where you can learn this clamp() function . https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
Hope it will help you .
0 - Aseem• 30
@AseemsGit
Submitted
Any feedback will be appreciated. :)
Manish Mandal• 650@manishdevelops
Posted
hey Aseem.! happy for you for completion of this project. Let me tell you something so that you can improve your solution.
Always use <h1> first and adjust the font-size. You have used <h2> and there is no <h1> before it. that is not good practice. Also if there is no requirement of heading for a project then you have to use <h1> and set it to 0 font-size Otherwise it will show you html issue.
Marked as helpful
0 - Rameesha Padmatilaka• 110
@rameesha0126
Submitted
I have following issues with my code.
- Adding a purple layer on the image
- In the mobile view I changed stats section to a column but cannot center it within the card element.
- Changing the size of text with the screen size. Currently when the screen size is reduced, the text wraps but the size does not change.
Appreciate if you can go through the code and point any errors you see as well.
Manish Mandal• 650@manishdevelops
Posted
I feel you have submitted the your another project's solution. Please update and regenerate your solution.
0 - sztosiur• 110
@sztosiur
Submitted
This is my first challenge. I've centred everything on the screen with flexbox. I haven't done any semantic in this one, but definetly start doing it with the future projects. Funny thing about this first one is that I thought that I have to recreate QR Code by using CSS and HTML only.
Manish Mandal• 650@manishdevelops
Posted
congrats on completion of your very first project. Your solution is quite good. However there is some responsiveness problems in small devices. Add these codes to achieve full responsiveness.
.wrapper { width: min(239px, 100%); } .qr { width:100%; }and remove max-width from the .text class
Marked as helpful
0 - AKASH VERMA• 50
@akash4102
Submitted
how i can make this more better? pls suggest!
Manish Mandal• 650@manishdevelops
Posted
Hello Akash... your solution looks better. But there is a issue. It will be good practice if you enclose rating numbers inside <button> instead of <span> . <button> is used for in-page actions when you don't want to navigate to another page.
also your thank you portion can be seen by clicking submit button without selecting any rating so, there need a condition too..
hope it will be help you.. keep coding =)
Marked as helpful
1 - Alan• 60
@Pound-Hash
Submitted
How can I get the transparent overlay to be the same size as the underlying NFT image?
Manish Mandal• 650@manishdevelops
Posted
hi Alan you can use the below codes to get the overlay ..
.images { position: relative; } .overlay { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }hope it will work for you =)
Marked as helpful
1 How should I adjust font sizes across all devices? Do I just decrease as the screen width decreases? And by how much?
Manish Mandal• 650@manishdevelops
Posted
Great question @dagimchi I also had same confusion before but I when I became familiar with clamp() function all the problem solved for me. In this you will need your min and max font size and your min and max screen width .Now your font-size will automatically adjust in your specified width of screen. I will highly recommend you to use clamp() function. follow this URL...
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
2- a86• 150
@alexeightsix
Submitted
how to add mask overlay to img?
Manish Mandal• 650@manishdevelops
Posted
hi @alexeightsix congrats on completion of this project... add the below code to color the image
.right { background-color: hsl(277, 64%, 61%); } img { mix-blend-mode: multiply; }hope it will work for you...
Marked as helpful
1 - Stephanie• 50
@mekoness
Submitted
I just started working with media queries and I am still struggling with the breakpoint from mobile to desktop layout. Should I add an in-between breakpoint as well for medium sized screens as well?
Manish Mandal• 650@manishdevelops
Posted
hi Stephanie, the application of Media Queries will depend on your content, Whenever you feel there is need to add Media Query you can add. But you should design mobile first and after that you can use media queries as required. generally I use maximum 2 break points. max(), min(), clamp(), calc() these are the functions which can minimize the Media Query break points So you should try them.
1 - Fiorella Zelaya• 50
@fiozelaya
Submitted
- How can I approach this solution in a better way?
- Is the way I lay out the button and divider okay? Is there a better way?
- Is it responsive enough?
Manish Mandal• 650@manishdevelops
Posted
congrats on completion of this project.. Your solution looks great to me .. But there needs some improvement in the code because divider part is troubling in small screens .. You can apply this one line of code for full responsiveness in all devices..
.divider { width: min(90%, 80%); }
Hope it will work for you.. keep coding =)
Marked as helpful
0 - Koussay• 60
@KoussayDhifi
Submitted
Got any tips for my responsive design ??
Manish Mandal• 650@manishdevelops
Posted
hey congrats on completing the project. your solution is looking good . However your solution has some responsiveness problem in the small devices . You have to apply only this one line of code to achieve full responsiveness...
@media (max-width: 950px) main { width: min(350px, 100%); /* width: 350px; */ }
hope it will help you.. keep coding :)
Marked as helpful
1 - Ajogu Chinasa• 20
@ajchinasa
Submitted
It is a great start as a first project. Please let me know if there is a line of code you would have written differently.
Manish Mandal• 650@manishdevelops
Posted
hey @ajchinasa , nice work congrats... on completing this project I would like to suggest you something to improve your code
body { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; }
.main { /* position: relative; / / top: 110px; / width: 220px; display: block; / margin: auto; */ text-align: center; background-color: hsl(0, 0%, 100%); padding-top: 10px; border-radius: 10px; }
footer { /* display: flex; / / align-items: center; / / justify-content: center; / / position: relative; / / top: 150px; */ font-size: .8rem; }
hope it adds up to your knowledge..
Marked as helpful
0 - Christian Martins• 30
@christianhsmartins
Submitted
I want know if have a better mode to construct this, please.
Manish Mandal• 650@manishdevelops
Posted
hey @christianhsmartins .. Great work. congratulations on completing this project.. your solution looks great to me . although you can apply the below codes to improve your solution a bit.. just add width of img 100% and also you can add some margin to the card.
.container .box .qr-code img { /* max-width: 28.8rem; */ border-radius: 10px; width: 100%; } .container .box { margin: 1rem; }
hope it will work.. happy coding :)
Marked as helpful
1
