I am satisfied with the result, however I don't understand why my elements are not the same width...
If you know the answer, please let me know. 😅
It's my first React project, do you have any tips with React? Thanks!
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!
👾 Hello, Frontend Mentor coding community
This is my solution for the Social proof section challenge. TWEAKS 🚀:
Hover effects
👨🔬 Follow me in my journey to finish all challenges (HTML/CSS/JS) to explore solutions that aspires everyone with custom features and tweaks
Ill be happy to hear any feedback and advice!
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);
}
I'm starting to learn CSS and sometimes I'm not sure if it's ok to use absolute units or if I should try to avoid them and always use relative units. In this solution, I tried using relative units for width and height but it was breaking on tablet screens so I ended up using pixels.
Other than that, I would really appreciate any feedback you can give me. I used flexbox and media query to make the page responsive
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.
I don't know how to make all images in card the same size
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;
}
give me advice about good practice please what can I improve ?
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.
