Challenge using CSS and HTML, I have some questions plz!
Design comparison
Solution retrospective
Hello there!
I managed to do the challenge pretty fine I think, however I do have some questions!
1- When I was trying to copy the design and was watching the images that come on the folder to guide you, I couldn't quite get the exact size that I should go for. For example, on the image of the folder, the 375px layout looked way smaller than on my browser's dev tools, so it was harder to actually match the sizes of the boxes. Besides, I didn't know what height to use on the dev tools to guide me.
2- I had some trouble trying to resize the img of the users (the circle ones, that are on the bottom squares). I used the "vw" measurement to let it be flexible, but it doesn't seem the appropriate way to do it, since when I make the screen smaller on the dev tools, it just looks really weird, even though than on the 1400px and 375px are just fine, but I would like the design to look ok on all the screen sizes.
3- Another responsive design question that I have is that the letters on the square containers of the bottom, when resizing the screen to a less px-width one, the letters just don't fit the box and get out of it from the bottom (that's why I made the query on 1200px, because at that point it started to look kind of bad). Seems like the solution is to give the letters or all the content inside the box a way to automatically fit on the box and resize accordingly, how could I do that?
4- Did I do the background ok?
That's all, thanks!
Community feedback
- @Ayman-Shakil192Posted over 1 year ago
It sounds like you may be encountering some difficulty in accurately determining the size of elements on your webpage. One possible solution is to use a tool like a browser extension that allows you to measure elements on your page more precisely. Some popular options include Perfect Pixel, and MeasureIt. Additionally, it may be helpful to consult the design specifications or style guide for the project to ensure that you are using the correct dimensions and measurements.
Using viewport units (vw) can be a helpful way to make elements on your page more flexible and responsive to different screen sizes. However, it is important to ensure that your design still looks good at smaller sizes, as you mentioned. One possible solution is to use media queries to adjust the size of the images and other elements at different screen sizes. For example, you might use a media query to reduce the size of the images and adjust their placement on smaller screens.
To ensure that the content within your square containers remains visible and readable at all screen sizes, you may want to consider using responsive typography techniques. This could include using relative units like em or rem instead of fixed pixel sizes for text, as well as using CSS properties like text-overflow and overflow-wrap to ensure that text within containers behaves in a consistent and predictable way. Additionally, you could consider using responsive design frameworks like Bootstrap that include pre-built components and styles for responsive typography.
Marked as helpful0
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