Skip to content
OverviewSolutions
3
Comments
3
P

Jaye Heffernan

@jayeheffernan50 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

  • NFT Card

    #bem
    P
    Jaye Heffernan•50
    Submitted 18 days ago
    1 comment

  • Blog Preview Card

    P
    Jaye Heffernan•50
    Submitted 19 days ago

    On my .card at desktop size I set max-width: 384px because Figma said width 384px with box-sizing: border-box - but it rendered too small. I had to increase to 386px or swap to box-sizing: padding-box; to make it look right. It's only a couple of pixels, so I'm guessing it comes down to slightly different calculations when centering an element, or something like that. But if you have any workflow tips to get it 100% perfect, LMK!

    1 comment

  • QR Code Component

    P
    Jaye Heffernan•50
    Submitted 19 days ago
    1 comment

Latest comments

  • P
    Jaye Heffernan•50
    @jayeheffernanPosted 18 days ago

    Looks good. Gets awkward around 700px width. I implemented the "Active" states as if the whole card is one single clickable item, but I think you're probably correct to have image/title/author as 3 separate active states

    0
  • uptown_girl•210
    @uptowngirl757Submitted 24 days ago
    What specific areas of your project would you like help with?

    I would like to understand how to split max-width and width styles using the .container and .content wisely without causing layout issues. I would like to know times when we need to split the max-width and margin in order not to cause and bgc problems

    blog preview card using Flexbox

    1
    P
    Jaye Heffernan•50
    @jayeheffernanPosted 19 days ago

    On the card .container, I would suggest a max-width rather than e.g. width: ...px. That way it's the correct width if there's room, but can shrink for a very small screen. Don't worry about the size of the margin around it - the content is what you care to size, and the margin exists only to center the content. margin: auto is working fine for the horizontal centering. display: flex would work too, and help you to center vertically.

    Re the .content:

    1. Try not to write specific widths, as much as practical
    2. Follow the structure of the design file, where it seems reasonable

    In this case the design file shows that .container has padding, and then .content is just width: 100% inside that padding. That's a good structure, you can copy it directly.

    I think you've done most of that already, but hopefully it reassures you and addresses the feedback you wanted.

    Marked as helpful
    1
  • P
    Jaye Heffernan•50
    @jayeheffernanPosted 19 days ago

    Code looks good 👍 Page works well.

    Some visual details not 100%, like:

    • Font-sizing
    • Card width
    • Vertically-centering the card in the viewport
    1