Design comparison
Solution retrospective
Here's my version for the task requested. I've used all my knowledge available to make it look as close as the given design.
One thing that I little bit struggled for the desktop version, I can't set the needed version of the imagine for desktop version, I appreciate your advices on how i can improve it and serve the right version of the image. Another thing, for the desktop version the content side, should i set width/min-width to this container ? because I've tried different versions to match the design, unfortunately I'm doing smth wrong, because can't reach what i want.
As for the button in the desktop version, got some issue on laying the cart icon and the text in one line, what do i have to set so they can align together ?
Highly appreciate your suggesyions !!
Community feedback
- @smahidvPosted about 1 year ago
In the desktop version, both the image and content share equal space in the container. To make it responsive, it's best to use CSS Grid like this:
.container { display: grid; grid-template-columns: 1fr 1fr; } This gives better control compared to using flex
Marked as helpful0@orazdaurenovPosted about 1 year ago@smahidv thank you bro !
I've tried as you suggested and after several overall changes I managed to match the given design
Another issue that I face is the image size gets broke down when it's resized, and when you change the viewport the image gets much smaller before to get mobile version, I don't know actually where I'm missing something to improve, I've tried a lot of changes but didn't get any result (
0@smahidvPosted about 1 year ago@orazdaurenov It's completely normal for the image to adjust its size in this situation as it needs to fit within the constraints of the grid layout. to fix this, you can modify the media query by using 'min-width: 720px'. Remember to update the image size in your HTML accordingly and for the button, apply 'padding: 1em 2em'. Using 'em' units ensures the padding adjusts proportionally based on the font size of the current element, making the button responsive as for 'rem' it depends on the root element . you can check out this : https://www.youtube.com/watch?v=JHregeIsjPQ
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