Skip to content
OverviewSolutions
28
Comments
5

Roan Macmillan

@RoanMacmillanEdinburgh820 points

Hi, I'm Roan. Currently studying Front-end development and hope to land my first job soon!

I’m currently learning...

Tailwind 🚀

Latest solutions

View more solutions

Latest comments

  • Roan Macmillan•820
    @RoanMacmillan

    Try this on the input element:

    
.input__txt {

box-sizing: border-box;

}

    By default a lot of HTML elements have the value 'content-box' which means that any padding or border you add will increase the overall width of the element, so you can use border-box like above.

    As for the the actual to do list element you must have a different width set compared to the input field, maybe you could look to change that. Hope this helps!

    Marked as helpful
  • Roan Macmillan•820
    @RoanMacmillan

    Nice one looks good!

    I noticed there is an issue when hovering over the buttons; the container seems to grow a bit. You could try this instead:

    button {
    font-weight: 700;
    border-radius: 30px;
    color: inherit;
    border: 2px solid white;
    padding: 1rem 3rem;
    background-color: var(--color-Very-light-gray-background-headings-buttons);
}


button:hover {
    background-color: inherit;
    cursor: pointer;
    color: var(--color-Very-light-gray-background-headings-buttons);
}
    Marked as helpful
  • Roan Macmillan•820
    @RoanMacmillan

    Looks awesome well done. Consider using a h1 tag for the main heading, there's a few reasons why this is important:

    • Accessibility: Having a clear and descriptive <h1> heading can improve the accessibility of your webpage. For example, screen readers will use the <h1> heading to provide an overview of the content on the page.

    • Search engine optimization: Search engines use the <h1> tag to determine the main topic of the page.

    • User experience: A clear and prominent <h1> heading can help users understand what your page is about and quickly find the information they are looking for.

    Marked as helpful
  • Roan Macmillan•820
    @RoanMacmillan

    To make the images within the cards the same size you can consider wrapping the images in a container and doing something like this. Not entirely sure this is the best way to achieve this, but worked for me pretty well in this challenge.

    .imgContainer {
  width: 264px;
  height: 160px;
  overflow: hidden;
}
.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    Marked as helpful
  • Roan Macmillan•820
    @RoanMacmillan

    Hey there. Consider using semantic HTML elements. For example;

    • Wrap the main content of your html in a '<main></main>' tag instead of using '<div class='container'>'.

    • Wrap the 'Your result' element in a h1 tag instead of a p tag.

    This will make sure you avoid accessibility issues and will provide more context and structure to your content.

    Marked as helpful