Skip to content
OverviewSolutions
24
Comments
15

Kirsten ✨

@ofthewildfire460 points

👋 Hey, I'm Kay—front-end enthusiast & aspiring developer - I enjoy using various different technologies.

I’m currently learning...

HTML ✨ CSS ✨ JS 💅 SCSS 🌐 React ⚙️ Backend with Node.js

Latest solutions

View more solutions

Latest comments

  • Kirsten ✨•460
    @ofthewildfire

    I see the following from my screenshot generated on the site and I am working on them and will update accordingly.

    • The background image quote is in the wrong spot on the screen. Which is odd, because when I click the link its in the correct position.
    • The lack of an h1 heading is causing an error on this site, I dont know where I would put an h1 header, I will look this up and ask some questions.
    • My solution is too tall, I do not like it, I will edit this.

    This will be done AFTER my base apparel, since the focus for me is on fixing my newbie challenges and this was after all just to practice laying out on a Grid

    Thanks!

  • nade12209•70
    @nade12209

    QR CODE

    #accessibility#airtable#cube-css#backbone
    2
    Kirsten ✨•460
    @ofthewildfire

    Welcome! Looks like its your first challenge

    Looks good, however it should be centered, you can do that easily by just using Flexbox on the body. I also noticed that your class names, have no meaning, a class name should have some meaning to the element.

    display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

    Your QR code is also missing an alt tag.

    Good luck!

  • Kirsten ✨•460
    @ofthewildfire

    Hi there. Your solution looks great, I just have a few small suggestions.

    When you zoom in (as some users do on sites), your component is chopped off a bit at the top, this is because there is no space for it to "go" - to fix this add a min-height: 100vh as opposed to a height - those two confused me to heck and back, but they are different :)

    An updated solution would be something like this:

    body {
    max-width: 90rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--Off-Black);
}

    Your .container element. First off, using a div is likely not the best option. Every page needs a main element, it is the entry point, and since this is just one component, its the place to use main -> You also are using a fixed width for your card, as a general rule fixed widths are not the best / actually most times you should avoid it. Instead, it would be better to use a max-width with a rem value. eg. max-width: 25rem to have the save consistency. Height value set to also is also not needed and does not add anything.

    The use of position is also so finicky and in my experience just makes it hard as all heck to make things response, and again its not neccessary, HTML will work with you to get all the proportions right, adding extras in this regard is just more complexity than is needed!

    An updated rule set for the container element would be something like:

    .container {
    max-width: 25rem;
    background: var(--Dark-Grey);
    border-radius: 20px;
    text-align: center;
}

    Adding a width to your image is not needed at all. The margin bottom is also not needed at all.

    Within your solution you use a lot of px values for your font sizes, this is not the best idea, you can read more here -> Why fonts should never be in pixels - so changing these to the recommended rem would be best!

    We also don't need the padding top and bottom on the .container p selector, I think you did it to add space, you can use something like Grid and gap for that!

    You'd add the Grid to the .container element, so, something like this: ->

     .container {
    max-width: 25rem;
    padding: 2em;
    background: var(--Dark-Grey);
    border-radius: 20px;
    text-align: center;
    display: grid;
    gap: 1.25rem;
}

    You can likewise do the same within your ul element to add space between your li elements.

    Overall, it was a good solution. Hope some of this was helpful!

    Happy coding!

    Marked as helpful
  • Kirsten ✨•460
    @ofthewildfire

    Hiya

    Great solution, however, I think it would be an improvement to adjust the unit used in your max-width on your blog__card :) Currently you are used a fixed max-width, which means when you zoom in, the card gets squished and does not adapt! To resolve this using a unit value such as rem would be way better.

    .blog__card {
	max-width: 20rem;
}

    I also think that changing the <h2> to an <h1> might server accessibility a bit better, it is the heading and that seems important.

    Overall a really good job 🙏🚀

    Marked as helpful
  • Kirsten ✨•460
    @ofthewildfire

    Great solution 👌💯

    My only advice would be to center the blog card on the page to more closely match the design.

    You did amazing however!!

  • Kirsten ✨•460
    @ofthewildfire

    Hmm. I'm on mobile right now but the challenge doesn't actually have any CSS to it. It's just a plain HTML file.

    I peeked as well I could on mobile at your GitHub repo. You should check the pathing to the required files is in check. I see you've said your CSS is in "assets" folder.

    Marked as helpful
View more comments