What are you most proud of, and what would you do differently next time?
I am proud that I could clown the project, not 100% as the original but at least I made it look decent.
What challenges did you encounter, and how did you overcome them?
One of the challenges is trying to understand what tools have been used for the original project, and how I can provide the same quality with a responsive design. I also learned new technics for styling lists and tables.
What specific areas of your project would you like help with?
I believe I need to enhance my responsive design skills, and I'm curious if it's possible to code the same page using fewer lines of code. If there's any way I could have done it better, please let me know. Thank you!
It's all the paddings in percentages that are causing problems in the styling. Don't use percentage like that. You lose all control because you don't know what a % will equate to, depending on the end users device, orientation and user agent settings.
Marked as helpful
This challenge is mainly designed to focus on good html structure. But there are a few issues I note in your solution:
th) for the row headers, not normal cells (td). Ideally, these header cells should also have a scope attribute set to "row" so it's clear they are headers for the row, not headers for the column../ or with no forward slash at all. It's worth reading up about paths for future reference.This solution is rendering extremely narrow on my phone and that is likely caused by the percentage paddings.
Marked as helpful
@MajdMohammed
Posted
Hello @grace-snow, I hope you're doing well.
I am extremely grateful for your tips; your feedback has opened my eyes to numerous tricks to enhance my code and become more professional. I believe I have addressed and implemented all your suggestions, but for table padding, I opted for percentage padding because it enables a responsive table on mobile devices. I attempted using 'rem' and 'pixels', but they don't seem to scale well on very small screens. I would appreciate it if you could explain or assist me with this particular issue.
Please feel free to re-check my code if you have the time. Once again, thank you so much, @grace-snow. <3
@MajdMohammed it doesn't look fixed to me I'm afraid. I can't add a screenshot here but it is extremely narrow with some content spilling out of the component. Make sure you check it on small devices and with enlarged text. Sites must work without any sideways scrolling at 320px wide.
Marked as helpful
@MajdMohammed
Posted
@grace-snow First of all thanks for your connection.
I checked it out. I noticed that the size of the header doesn't scale with the page width, I am having also this issue in a new challenge I just started a few hours ago. Here is a link for the latest challenge if you wanna check it out: https://github.com/MajdMohammed/FE-Mentor-Social-links-profile
I am trying to find some useful articles to read about responsive design especially when it comes to font size. One of the most common solutions I found is adding this line of code: <meta name="viewport" content="width=device-width, initial-scale=1.0">, which I already have :/.
Edit: PS: I sent a friend request on Discord to share files if needed. Thank you!
@MajdMohammed I also notice the html on the table is wrong. You've made them ALL into header cells now. That makes no sense. Look up these elements and make sure you understand the guidance given.
Marked as helpful
@MajdMohammed
Posted
Hello @grace-snow,
Repo is updated:
Please re-check the repo when you have the time. Thank you !
@MajdMohammed the clamp you've added for font size makes this inaccessible I'm afraid. The middle value must not be in viewport units. You need to convert that to rem. So 1vw + 1rem is fine but viewport units only is not.
You're really confusing things in the way you're using clamp for padding and fit-content for width. I really recommend against these while you're learning, the underlying understanding of the implications is missing. You don't need anything complex in this challenge! The main component literally only needs a max width in rem, that's all. And the body needs a very small padding value. That's all. Keep things simple.
Marked as helpful
@MajdMohammed
Posted
@grace-snow This is really genius, using 1rem + 1vw will allow the font-size to benefit from rem and vw advtanges. Thank you so much again for this brilliant 💡 idea. What about the response ? Is it good enough ?
@MajdMohammed
Posted
I think now i completely understand the flaws with using percentages, But if I still remember, when I use rem i also encounter same issue with styling. But I trust your judgement I will never use percentage in padding again !. Next time when i have the opportunity i will fix the font-size plus the table html.
Have a good day mam.
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
