Skip to content
OverviewSolutions
24
Comments
65
gfunk77
@gfunk77

All comments

  • Pritam Panda•60
    @imxeonSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    The design looks pretty similar. I would understand and apply responsive design in a better way next time.

    What challenges did you encounter, and how did you overcome them?

    This design looked simple and is simple. But it took more time to build it

    What specific areas of your project would you like help with?

    I need feedback on making this layout responsive so that It retains this aspect ratio on any screen.

    Responsive blog-preview-card

    1
    gfunk77•1,200
    @gfunk77Posted 6 months ago

    Nice job on your solution. The card looks really nice. I would suggest a few things that might help:

    • You have many 'containers'. For example, you can remove the id="rounded-box-section" entirely and just put those styles on main.
    • .rounded-box might make more sense being labeled as .card.
    • try to avoid using fixed width and heights on elements. That removes responsiveness. So for your .rounded-box, try something like width: 90%, max-width: 345px. Let the elements inside control the height, no need to set it.
    • You don't need a div for both category and publish-date. Put both the h5 and p inside one div.
    • Same for heading and description, they can both go inside one div

    I think you did a great job on the card. I hope this feedback is helpful to you.

    Marked as helpful
    1
  • vardhanf•80
    @vardhanfSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    i was doing my first challenge on front-end using html,css . I wanted to make it responsive but it seems i didn't.

    What challenges did you encounter, and how did you overcome them?

    actually while adding image it overflown i tried position:relative to overcome it as the card width changes QR-code also changes

    What specific areas of your project would you like help with?

    I wanted to make it responsive but it seems i didn't.

    QR code component

    1
    gfunk77•1,200
    @gfunk77Posted 6 months ago

    Hi! Nice job on your card component. Here are a few tips that I hope will help.

    • You can eliminate the .container from the html and all .container styles from the css.
    • For the body, add justify-content: center Now for the card...
    • add your padding and border-radius to the .card
    • give your .card a width of like 90% and a max-width of like 375px or whatever the specs say it is on large screens.
    • add text-align: center to .card and remove it from the *
    • for the img just select it with img, you don't need .card img. Keep your styles you already have

    At this point, you should have way less css and html and your card will look good and be as responsive as possible on all screens.

    I hope this feedback was helpful for you.

    Marked as helpful
    1
  • raficksz•10
    @rafickszSubmitted 10 months ago

    This is my frist challeng, feedbacks about code are welcome. Thanks for view.

    Blog Preview Card

    2
    gfunk77•1,200
    @gfunk77Posted 10 months ago

    Hi! Nice job on your solution and congratulations for completing the challenge. I’ll suggest that you look into how the em unit works because I think it is causing unexpected behavior in your code.In short, Em units compound inside of their containers. Check this out: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units# I’d suggest for now replacing all your ems with px or rem and see what happens to help understand. If you are using vs code you can use the find and replace feature pretty easily to do this. I hope this is helpful.

    Marked as helpful
    2
  • shivani•500
    @shivani1410551Submitted 10 months ago

    Please feel free to give me feedback,it will be a lot of help,correct me or give me advice anything is welcome

    Profile-Card-Component

    3
    gfunk77•1,200
    @gfunk77Posted 10 months ago

    Hi! Congratulations on your solutions. It looks really nice. I’ll offer a few general suggestions:

    • on the body use min-height: 100vh
    • avoid using fixed widths and heights on elements. This hinders responsiveness.
    • use max-width if you want to specify a limit to how much an element would grow.
    • remove unused classes from your html. You have several classes like likes, followers in your html that you do not select in the css
    • try as much as possible to select classes directly. For example, limit things like this: .main .profile-img-wrapper img. Just put a class on the img and select that. It is much more readable.

    I hope this is all helpful.

    Marked as helpful
    0
  • Kamran Kiani•1,280
    @kaamiikSubmitted 10 months ago
    • Is the img setting in mobile and desktop mode in ‍css correct? Do I need to make changes to it?
    • Is my overall css structure correct? I used the mix-blend-mode property to change the color of image to purple. Did I use it correctly?
    • If you see any other problems in my ‍css and html, please give me feedback. Your feedback helps me a lot.

    Stats Preview Card

    1
    gfunk77•1,200
    @gfunk77Posted 10 months ago

    Hi! I think your solution looks great! Very well done. To answer your specific questions

    • For the img, I’d use max-width: 100%.
    • Yes, you used mix-blend-mode correctly. Well done.

    I’d offer some suggestions on your css reset to consolidate a few things. Based on what you have already I think the following would suffice and you could remove everything else:

    *, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}

    If you want to remove margins on specific heading that’s fine like your h1, p etc…

    I think the above will keep your project working exactly the same and clear out a lot of unnecessary code.

    Well done. I hope these suggestions help.

    1
  • gfunk77•1,200
    @gfunk77Posted 10 months ago

    Hi! Nice job on your solution. The card looks really nice!

    I'll just mention a few things to consider:

    • on the body use min-height: 100vh and remove the width. Width is by default 100%;
    • on #container you have an align-items: center and display: block. align-items is a flex-box property so in order for that to have any effect, you need display: flex.
    • on * you also have an align-items: center, you should remove that one too.

    Nice job once again. I hope these suggestions were helpful.

    Marked as helpful
    0
  • Jason•40
    @JJenk89Submitted 10 months ago

    I found this a nice, quick starter project. I'm very impressed with the concept of the site and am looking forward to doing more challenging tasks.

    If you have any feedback, let me know.

    FE Mentor QR Code Card

    2
    gfunk77•1,200
    @gfunk77Posted 10 months ago

    Hi! Great job on your solution. The card looks really nice. Here are some suggestions that might interest you:

    • If you would like to center the card on the screen, add body { min-height: 100vh }. Otherwise, if you like it positioned as is and don't want to add min-height, you can remove the justify-content: center because that is not having any effect.
    • on the .qr-code you can remove the align-content because that is also not having an effect on your code due to the default property of flex-wrap: no-wrap which is applied.

    You can check this out in your dev tools and experiment.

    I mention these things because I love how minimalist your code is. I thought it would be fun to push it even further! I hope these suggestions are helpful!

    Marked as helpful
    1
  • gfunk77•1,200
    @gfunk77Posted 10 months ago

    Hi, the card looks great! Nice job on the solution. I was trying to check out the code but the link to your repository doesn't work. Just a heads up in case you may have a type in your code or something.

    0
  • gfunk77•1,200
    @gfunk77Posted 10 months ago

    Great job on your solution! If you would like the cursor to match the design, you can do the following:

    • create a file called <yourFileName>.svg
    • put this code in it:
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15" fill="none">
  <path d="M5.45613 1.7498V6.6248C5.30392 6.47993 3.30097 4.57754 3.10412 4.50402C2.90727 4.4305 2.69757 4.39756 2.48766 4.40718C2.27774 4.4168 2.07195 4.46879 1.88264 4.56001C1.69334 4.65124 1.52445 4.77981 1.38613 4.938C1.1313 5.22887 0.993749 5.6041 1.00022 5.99075C1.00669 6.3774 1.15672 6.74783 1.42113 7.03L7.36313 13.368C7.74213 13.771 8.26913 14 8.82213 14H13.4561C15.8561 14 17.4561 12 17.4561 10V1.429" fill="black"/>
  <path d="M5.45613 1.7498V6.6248C5.30392 6.47993 3.30097 4.57754 3.10412 4.50402C2.90727 4.4305 2.69757 4.39756 2.48766 4.40718C2.27774 4.4168 2.07195 4.46879 1.88264 4.56001C1.69334 4.65124 1.52445 4.77981 1.38613 4.938C1.1313 5.22887 0.993749 5.6041 1.00022 5.99075C1.00669 6.3774 1.15672 6.74783 1.42113 7.03L7.36313 13.368C7.74213 13.771 8.26913 14 8.82213 14H13.4561C15.8561 14 17.4561 12 17.4561 10V1.429" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
    • In your css:
    your-button { 
   cursor: url('./path-to-your-file.svg'), auto;
 }

    Make sure your path to the .svg file is correct and you include auto.

    Your solution is great. I hope this helps!!!

    Marked as helpful
    0
  • gfunk77•1,200
    @gfunk77Posted 10 months ago

    Your solution is fantastic. I think the way you added the stars works really well. There are many ways to approach it. You could just add 5 <img> to the html for each star card or you could use javascript and add the html in a loop. I thought your solution was fine though. It streamlines the code and you didn't have to muck up the html or create a js file. Congratulations. I hope this helps.

    0
  • gfunk77•1,200
    @gfunk77Posted 10 months ago

    Great job on your qr code. To answer your question I'd say, of course. Flex-box makes it really easy to get everything aligned. Just remember that you have many tools to center and align items and depending on the context, flex-box may not be the best solution all the time. I think in your case, you used flex-box just fine. I hope this is helpful.

    Marked as helpful
    1
  • Praveen Kumar•50
    @PraveenKum11Submitted 10 months ago

    Often get confused as to what to use when adding spaces between elements - when the spaces are not uniform.

    For uniform spaces gap does a great job, but when trying to add non-uniform spaces I get confused as to use padding or margin (especially when adding extra space at the end of page/element).

    I often end up using margin, but sometime it messes the layout as the background element does not expand to fit the inner element with large margin.

    Any suggestion for this?

    Simple QR code component

    1
    gfunk77•1,200
    @gfunk77Posted 10 months ago

    Your solution looks really good. Congratulations. To help with your questions, refer to the css box model. Here is a link to W3 Schools to get you started - https://www.w3schools.com/css/css_boxmodel.asp

    Padding is the area around the content and margin is the space around the element itself. So if you need to create distance between elements, you need margin. If you need to create space between the content and the border of your element, you need padding.

    When you use the gap property in flex-box, that is creating a specific distance between all of the flex-box items so that won't help if you need different spacing between elements.

    Check out resources for box model. It will really help. I hope this is all helpful.

    1