Skip to content
OverviewSolutions
9
Comments
9
P
innitman
@innitman

All solutions

  • Submitted 3 months ago

    Couldn't quite do it :(

    • HTML
    • CSS
    • JS
    1

    Any best practices for the CSS for making the green share div float above the button in desktop mode, but without introducing a complex series of positioned elements that would break the mobile view!

  • Submitted 4 months ago

    Grid

    • HTML
    • CSS
    1

    Anything you can comment on I'm grateful for, but nothing specific

  • Submitted 4 months ago

    Debating fluid vs breakpoints

    • HTML
    • CSS
    1

    Any insights welcome, but nothing specific comes to mind for now.

  • Submitted 4 months ago

    Images and SVG

    • HTML
    • CSS
    1
    1. SVG - I ended up just pasting it as an inline in the end. I struggled with the other method of using with the svg as a src. I've read about the viewbox, but I could'nt make it fit correctly. The "intrinsic" height and width on the raw svg seems to be width="15" height="16", but clipped the image. I tried removing one of width or height and it didn't work either.

    I tried using https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web and mirroring

    It might be something to do with viewboxes I feel, but I can't quite figure out how to use the with the svg as src in this case - any help would be much appreciated :)

  • Submitted 4 months ago

    Practising semantic HTML

    • HTML
    • CSS
    1

    I've read the MDN docs, and my take home understanding is is used for something "standalone" and/or reusable. is more for highlighting a non-standalone area or group of items (or basically when a more specific element isn't available). is use purely when styling needs to be added to a block. I'd be grateful for any mental models people have found helpful for when to use one or the other.

  • Submitted 4 months ago

    Divitis still...

    • HTML
    • CSS
    2

    I need to read into tab index and aria more. Any advice on helping make it more keyboard accessible appreciated :)

  • Submitted 4 months ago

    Blog

    • HTML
    • CSS
    2

    1. If .card-container is set to display: grid; and .card is a child of .card-container, place-content: center; did not work when width of .card was set to min(384px, 100%-48px). It seemed to calculate the larger width of the min options on desktop, use this to incorrectly center the content, and then shrink down to the smaller of the min options in terms of what it actually painted. Is this just an issue with using width: min(a,b) with grid children? I'm aware of minmax for the grid-columns, but am wondering if we can use plain old min for the grid children.

    2. Any help on how to make the font smaller without media queries as the front end mentor challenge suggested would be appreciated :)

  • Submitted 4 months ago

    Practising using Figma

    • HTML
    • CSS
    1

    I'm a little unsure why min-height: 100% didn't work for the .card-wrapper and I instead needed min-height: 100svh.

    The body has been set to min-height: 100svh so I thought setting min-height on body's child (i.e. .card-wrapper) to 100% would inherit 100svh? Would be grateful for any help!

  • Submitted 5 months ago

    Trying CSS Grid and media queries

    • HTML
    • CSS
    1

    I realise I haven't copied the spacing perfectly. I'm just wondering how to remove the white bits from the container (on the top and bottom left, to the outside of the blue card).