Kure-ru• 120
@Kure-ru
Submitted
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!
Roan Macmillan
@RoanMacmillan
All comments
- Roan Macmillan• 820
@RoanMacmillan
Posted
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
0 - Godstime• 330
@iceberg61
Submitted
👾 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!
Roan Macmillan• 820@RoanMacmillan
Posted
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
1 - Laryssa Carvalho• 30
@laryssacarvalho
Submitted
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
Roan Macmillan• 820@RoanMacmillan
Posted
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
1 -
- Nada Sabry• 120
@NadaSabry
Submitted
I don't know how to make all images in card the same size
Roan Macmillan• 820@RoanMacmillan
Posted
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
1 - Hadrien Janssens• 30
@BlackPigCompany
Submitted
give me advice about good practice please what can I improve ?
Roan Macmillan• 820@RoanMacmillan
Posted
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
0 -
