Submitted about 2 years ago

Perfume Challenge

Donn O'Lochlainn• 20

@donnol87

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

This one was pretty tricky. I still don't think it's fully responsive and I had to hard code some of the css for items to appear where I wanted them. I also struggled to get the fonts I wanted in VSCode.

Although I used FlexBox for this exercise, I still had to move items around with margin, padding etc to get them where I wanted them.

This doesn't seem right but the final product is almost good enough.

As always, please share any feedback so I can continue to grow as a front-end-developer.

Thanks all,

Donn

Community feedback

David• 8,000

@DavidMorgade

Posted about 2 years ago

Hello Donn, congrats on finishing the challenge!

As Aurel said, using paddings and margins is normal in any kind of projects, try to follow the styling guide to get your project to look more like the FEM solution, remember that you don't have to have it 100% the same.

I would like to give you a little recommendation, you can use flex-direction: column on your id=main for mobile devices, for example having it on a media querie:

#main {
    @media(max-width: 768px) {
       flex-direction: column;
    }
}

With this code your component will look like the solution for mobile devices!

Another advice is to take advantage of the <picture></picture> tag, in this project you are provided with two images, one for desktop and other for mobile, you can use de picture tag along the <source> tag to put both images and use them conditionaly depending on the width of the screen.

Hope my feedback helps you for future challenges, good job!

Account Deleted

Hi Donn!

Congratulations on finishing the challenge! First thing that pops to mind - did you use the style guide provided with the starter pack, which gives all the colors and font families that should be used in this project? The given fonts are 'Montserrat' and 'Fraunces' which can be imported from Google fonts and included as links in the HTML <head> tag, and then used in the CSS file. Colors can also be adjusted by referring to the said guide.

I would also advise to adjust the formating in your HTML document - you can use Prettier extension in VS code. I also see a lot of HTML issues flagged by the site and those all look CSS related, but I'm not sure what that is. Could it be related to Tailwind, which is added as a script?

As for the responsiveness, you could add a breakpoint and adjust the card's appearance based off that breakpoint. I myself used flexbox for the whole card, used flex-wrap: wrap and then two sides would take up 50% width of the main card. Then I chose breakpoint of 650px where the image would be displayed as a block and would take up 100% width and the section containing the text would take up 100% width as well. Hope this helps!

Aurel• 290

@Aur71

Posted about 2 years ago

Using padding and margin is normal, so dont worry about it. Also when you downlad the starter files there is a styling guide. There you will find the colors and fonts used in design.

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