Submitted almost 2 years ago

HTML CSS (hover animtation on the image)

Levkol• 30

@Levkol

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

How can I edit the picture so the item is in the middle and a little bit smaller? Any answer will be appreciated!✌

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey@Levkol Regarding your question

The incorrect image is showing, which is causing the issue you are having. This is happening because the Source image was not typed properly. The media needs be inside the source.

 <source media="(min-width: )" srcset="">

I did the same effect on my card a while back. You can check it out HERE.

Happy Coding! 👻🎃

Marked as helpful

Shaik Shahbaaz Alam• 40

@ShahbaazX786

Posted almost 2 years ago

@vcarames Your design Looks fire! how many yrs does it take to reach that level of mastery sensei??

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

@ShahbaazX786

Thank you! I am nowhere near master level.

Creating the card took only a few minutes, but learning what to use how use it took me several days.

Shaik Shahbaaz Alam• 40

@ShahbaazX786

Posted almost 2 years ago

Hey, I think you should wrap that image in a div and then set the image width:300px, and wrapper div width:max-content.

Note that if you decide to use 300px as image size then make the card width double of that.(600px).

Also use flexbox on card to make the inner 2 divs[1 for image and 1 for right side all content] sit side by side in a row by using (display:flex and flex-direction:row).

Please log in to post a comment

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