Design comparison
Solution retrospective
I'm most proud of successfully implementing grid layouts in my project.
What challenges did you encounter, and how did you overcome them?I couldn't trouble figure out how to decrease font size without using media queries. I've searched online and consulted documentation on units of measurement like vh, vw, etc., but haven't found a solution. Can anyone help me?
What specific areas of your project would you like help with?I would like the solution to adjust font sizes based on screen size without using media queries. Additionally, I'd like to know how to create a smooth transition in the size of elements between screens.
Community feedback
- @grace-snowPosted 8 months ago
I can spot some immediate issues with the html on this I'm afraid. I hope this helps for other challenges too.
- learn how and when to write alt text on images. There is a good post in the resources channel on discord about this. The alt you have on the main image in particular is not descriptive.
- this is one card component. It is not a full Web page. That means it would go on a page, likely with other blog cards alongside it. A h1 is a page heading and you can't have multiple on a page. So you know the heading in this cannot be a h1, it would need to be h2.
- it is invalid html to place units inside the width or height attribute in html. They should hold numbers only.
- the purpose of the width and height attributes is to tell the browser what aspect ratio it should save space for while loading the image. That means if using width attribute you need to use height as well.
- Think through the most important part of this component - it's function. How would any user ever access this blog when there is no link included in there??
And now styling feedback:
- never limit the height of elements that contain text, including the body. Use min height instead of height so it can extend beyond the height of the viewport when needed.
- I recommend using flex column for centering a component in the viewport and not grid with place content center. The reason is because with that grid approach if a user has a larger text size and views the component on a smaller screen content can overflow on the left as well as on the right, which you cannot scroll to reveal. With the flexbox approach overflow would only happen on the right meaning users could scroll to reveal that content.
- you should not have a hover style anywhere when you've not got interactive elements (see above point). Hover styles indicate interactivity.
- you don't need to change max width in a media query
- you should be styling mobile first. Always make mobile styles the default.
- Media queries must be defined in rem or em not px
1@matbac85Posted 8 months ago@grace-snow
Thank you for your feedback and the various articles you've shared with me. I read the one about the "alt" attribute and I have to say that it's clearer for me. I've adapted my code accordingly and I hope I didn't make a mistake!
As for the rest, I've adapted my code following all your recommendations. That's really nice and it's helped me a lot.
0 - @Mirjax2000Posted 8 months ago
Very prety solution.
max-width: clamp(20.438rem, 5.352vw + 19.183rem, 24rem);
if you have time, could you please explain how did you figure out 5.352vw + 19.183rem? I am solving that problems and still cant make it precise as i want to.
0@matbac85Posted 8 months ago0 - @DudeldupsPosted 8 months ago
Hello! The solution looks good!
Some small tips: When creating a website, you should always consider screen sizes from 320px and up. Your component does not have any space to the borders of the screen when viewing it at 320px.
Also, a good use case for a
<figure>with a<figcaption>is the profile picture + name 🤓And you don't have a
<main>element in your HTML. A real website should always have a <header> and <main> element, as children of the <body>. It's probably less important on this single component challenge, but keep it in mind for future projectsFor your first question: To adjust any size (font-size, margin, padding...) you can use the
clamp()function. If you already think like this, I'm sure it will become your best friend. You can also search for "clamp generator" at the search engine of your choice and it will calculate a clamp for you.Using anything else than
remoremfor font-sizes is not a good idea. And clamps of course.You don't really need a transition "between screen sizes". When a user looks at a website, it is very unusual for the screen size to change. You should rather focus on having the site look good on all separate, static screen sizes 🙂
0@matbac85Posted 8 months ago@Dudeldups
Hello and thank you very much for taking the time to analyse my code and for giving me these tips.
I've corrected it using the clamp () function. It's just great. Many thanks!
I also replaced my div containing my image and text with a <figure> and <figcaption> tag. I'd never used this tag before.
Many thanks again!
0 - @DanCodeCraftPosted 8 months ago
This comment was deleted 8 months ago
0@matbac85Posted 8 months agoThanks for your analysis! I'm going to try out what you recommend for the transition because I really don't like that abrupt change of state when I go from my desktop version to my mobile version. @DanCodeCraft
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
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