Hello community, I have solved another exercise, applying little logic with js, and more design in the part of css that complicated me a little. How can I make the text to be above the image? I tried to play with the positions, but it gives me a lot of problems with the heights, that is an inconvenience that I had. Please if you have any improvement for my code, design, or accessibility, I would be very grateful to know in the comments. Happy coding. 🍔
FETYagency
@FETYagencyAll comments
- @3eze3Submitted over 1 year ago@FETYagencyPosted over 1 year ago
hey brother i swear it is a nice attempt and here is some points that i think will improve your design
- make that button positioned relatively to the viewport instead the inline_start of the wrapper container because it will cause you an overflow.
- you can wrap all the images in one container and attach their sizes to the inline size of the container to make them look like a united item.(you can use the container query, the "cqi" unit to achieve that and rely on the inline-size property powered by the clamp function and set the flex-basis to "auto" if you are using the flex blox).
- never forget to use the max-inline-size property to avoid your design getting over-expanded
- use several media queries with specific text styles so to avoid that creepy shrinks and breaks in your text (it is very important when your are working with a brand that want to establish its identity in the users brain).
Marked as helpful1 - @3eze3Submitted over 1 year ago
This challenge has been very good to practice a lot, especially for me, with the mobile design, and the CSS grid, I had some delays in terms of the measures of each section, but I think I had a good result with this challenge, and you know that any improvement or any suggestion to improve my code you can tell me in the comments. Happy coding ❤
@FETYagencyPosted over 1 year agohey, it a nice attempt , i didn't read the code but i will tell you what i can see your webpage need alignment improvements at the 800px until what's less also there are some texts are overflowing out of the containers and to solve this you can go with overflow-wrap though it is not recommended and if you want to get advaced you can use the clamp function and the @container and the container width. i wish i helped even a bit, have fun brother ;)
Marked as helpful1