My biggest challenge was making the product image stay perfectly square on smaller screens while keeping the layout proportional and visually appealing. After some research, I discovered the CSS "aspect-ratio" property, which allows you to define the relationship between width and height of an element. By using "aspect-ratio: 1 / 1", I was able to make the image automatically adapt and remain a perfect square on mobile — without relying on "hacks" like fixed heights or padding tricks.
Latest solutions
Latest comments
- @marianaararipeWhat challenges did you encounter, and how did you overcome them?@Edixlk
Great, the font for the "add to cart button" has to changed to the monserrat font face. I am facing the same issues with the font also.
- @Donald-cmd-opsWhat are you most proud of, and what would you do differently next time?
trine make it closer to Figma
What challenges did you encounter, and how did you overcome them?very hard to make exact same as Figma not knowing the spacing the stuff
What specific areas of your project would you like help with?wanna learn how to make page more efficient and how to make it looks more similar to Figma design
@EdixlkEverything looks great, I suggest you get the correct font for the heading and fix the padding for the card and body itself
- @whosadik@Edixlk
Great, Can you try centering the card itself by using flexbox on the container or wrapper and make the "Jessica Randall" text a bit bolder?
- @Rahat-Hridoy@Edixlk
I think that the card would need a bit more of the border radius and width. and you can center it two ways by using:
Flexbox
display: flex; justify-content: center; align-content: center;
Grid (Which is just only two lines of code)
display: grid; place-content: center;
the paragraph line spacing is fine also
- @iNader98@Edixlk
Is it possible if you can make the card a bit higher and change the color of the header text?