@Gideon-wSubmitted 2 days ago
P
Aminpatra
@AminpatraAll comments
- @AminpatraPosted 2 days ago
Your solution is very good, have some tips for you: 1- you can remove the padding from the body element and set a min-height for the body like : min-height: calc(100vh - 1px); & height: auto; 2- then you can warp all elements in a container and then set a grid for the body element and place-content: center; to center all content. you can also use flex-box for the same reason.
0 - @jonathanudehSubmitted 3 days agoWhat are you most proud of, and what would you do differently next time?
I am proud of how responsive I made the page
What challenges did you encounter, and how did you overcome them?Displaying the soicals in deifferent pattern for both the mobile and desktop view. But I solved that with JavaScript
What specific areas of your project would you like help with?The only thing I was unable to replicate and need help with was making the share svg to be surrounded with grey color. I set the border but that made the svg smaller. I couldn't decipher how to achieve this without the size of the share svg being affected. Any help wil be higly appreciated. Point me in the right direction if you can. Thank you.
@AminpatraPosted 2 days agoYo, sorry for my late response, however I've seen your commits in github, you are actually doing great keep going, I have a tip: When using top, bottom .. it is better to use px units with it not rems, rems is more for font sizes, and make the container the position absolute.
0 - @KareemAshraf33925Submitted about 2 months ago@AminpatraPosted 3 days ago
Hi @KareemAshraf33925, I hope you are doing well bro, I just have some tips for you, I have seen almost all of your work, Some actually looks super good and some needs some modifications, however all needs some modifications in terms of responsiveness, So you can follow the learning path in this platforms titled "Building responsive layouts", it is really useful and I learnt a lot from it. All the best.
Marked as helpful1 - @coding-vasuSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
-
Used
SASSfor this project & its quite intuitive, I liked it! -
css filterproperty to enhance look & feel of the card.
Overwhelmed with Responsiveness, Isolated & took 1 step at a time to solve it
What specific areas of your project would you like help with?Utopia fluid responsiveness design system implementation.
@AminpatraPosted 2 months agobeautiful design bro. Could please tell my from where you learn this ?
0 -
- @eddybproSubmitted over 1 year ago
Hi, there
This is my solution for the product-preview-card-component challenge.
Feel free to leave feedback & comments.
@AminpatraPosted 2 months agoUsing a lot of techs I don't know yet, looks interesting. Looking forward to learning all of these techs.
0 - @progressive-newbie263Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
find out that i should have used margin: 0 auto earlier
What challenges did you encounter, and how did you overcome them?it took me a while to center that header
What specific areas of your project would you like help with?.
@AminpatraPosted 4 months agoBeautiful, Just a little tip, put a
transition: all 0.3s ease-in-out;or something on the cards to make the hover effect looks smoother. Have fun.
1 - @PYXHDSubmitted 8 months ago
- @NF0marSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that I have finished this second project by frontend mentor. I take some CSS lessons so that I could finish the next project in no time.
What challenges did you encounter, and how did you overcome them?The challenges that I encountered are that I have problem with layouting and styling the HTML elements, but I overcame with searching in google.
What specific areas of your project would you like help with?Kindly check out my solution and leave a feedback🙏
@AminpatraPosted 8 months agoYour solution is very good, but you just have to add height of 100vh to the body and flex or grid to center the card. So it will be like this : body {height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center}
Marked as helpful0 - @amna1526Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of the CSS mainly.
What challenges did you encounter, and how did you overcome them?I didn't know how to add shadow and so I struggled with that until I figured that values are like that of text-shdow.
What specific areas of your project would you like help with?How to add border-radius to a svg file??
@AminpatraPosted 8 months agoAlSalaam alaikum, So first you can add a border-radius to the svg file like any other image, there is no difference. So the solution in your situation can be like this -> .container > img {border-radius : (and the value here)} , the ">" symbol refers to the direct child or the direct image after the .container class element. Second you can center the card by just adding display grid to the body like this -> body {display : gird; place-content: center; height: 100vh}
0 - @ivara21Submitted 8 months agoWhat specific areas of your project would you like help with?
tell me what you think and some advice for me to take note :) all comments will be appreciated thanks :)
@AminpatraPosted 8 months agoLiked your solution a lot , I did this same challenge from an hour ago I think and I see this better than mine . The only two things I can say is : 1- you can add the line-height: 1.5 or 1.6 to paragraphs to make space between lines like in the design , 2- try to learn grid if you don't know it. For example you can place the content in the center like this -> body {display : grid; place-content: center} , but I guess you know it because you did the solution well.
1 - @AntonvasilacheSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
- Creating and placing the box shadow according to the design
- Creating an active state
- Integrating the
box-shadowinto that active state
- Adjusting the spacing between the elements to make it look like the design file - took multiple trials and errors to do it without too many fixed values
- Not sure how best to adjust the font for mobile view, without using media query. Tried using vw for font-size, but the result does not seem visible.
@AminpatraPosted 8 months agoYour solution is very good in this one, but here is a tip to save time. Instead of repeating the same color percentages you can define a :root selector, and you can call its elements by typing -> color: var(--"the color name"). So the final result for this project will be like this : ''' :root { --Yellow: hsl(47, 88%, 63%); --White: hsl(0, 0%, 100%); --Grey: hsl(0, 0%, 50%); --Black: hsl(0, 0%, 7%); --font-mid: 500; --font-bold: 800; } ''' Sorry I don't know yet how to format texts in this feedback thing :)
Marked as helpful1 - @AntonvasilacheSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
- Figured out the layout pretty quickly.
- Did not use too many fixed values.
- Would change: trying to write less CSS.
- Removing the lateral scrollbar, while keeping the container centered vertically.
- It took several trials and errors with flexbox and grid, eventually I did it by setting .container-wrapper to
height: 90vh.
- Ways of optimizing the HTML structure (less elements, if possible).
- Optimizing the CSS classes and code.
@AminpatraPosted 8 months agoYou can make the body it self flex to center the card, by giving it height of 100vh or better height : calc(100vh - 1px) -> to not make the shaky feeling in mobile. Instead of defining a container and give it the height of the page so the final result we be like this : body {display: flex; flex-direction: column; justify-content: center; align-items: center; height : calc (100vh - 1px)} or you can just use (display: grid; place-content: center;) instead of flex properties. Hope this helped you.
Marked as helpful1
