Skip to content
OverviewSolutions
26
Comments
65

gfunk77

@gfunk77Pittsburgh, PA1,270 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Pritam Panda•60
    @imxeon
    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,270
    @gfunk77

    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
  • vardhanf•90
    @vardhanf
    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,270
    @gfunk77

    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
  • gfunk77•1,270
    @gfunk77

    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
  • gfunk77•1,270
    @gfunk77

    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
  • gfunk77•1,270
    @gfunk77

    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.

  • gfunk77•1,270
    @gfunk77

    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
View more comments