Display flex doesn't work after copied from sample

Hello, i am currently trying to complete the responsive web design project : build a product landing page. My usual method of working is copy and paste the already working sample, make changes here and there to fit my need, and complete the challenge.

This time, however, this doesn’t seems to work. The sample source here uses some display:flex within it’s CSS, but when i copied the CSS to my personal codepen it just doesn’t seem to work : the elements are still displayed as block element, despite of the display:flex within the CSS code.

I also tried to copy to my laptop, still doesn’t work. Why? Do i miss something?

You need to set the CSS preprocessor to SCSS.


I would also encourage you to do more on your own. You’re not gaining anything by copying code that much.

1 Like

Well, in all honesty, you’re not really supposed to be copying and pasting from the example project. You’re supposed to build a project that ‘functions’ similarly to the example project. Have you been through the challenges leading up to the projects? @PortableStick is correct however… the preprocessor needs to be SCSS in order for this to work.

Thank you, it worked now. I defenitely will not just copy and pasting, i understand that it is not a good practice :pray: I just need to understand the available basic sample first before i make my own adjustment.

Thank you for the concern, i will not rely on copy and paste only, i use the basic sample as a base to create my own adjustment.

Hey no worries - here’s another resource that I love to use for help on everything CSS, Javascript, etc… I gave you the flexbox link here, but if you explore their site, its very extensive and has examples for everything to help you get started. Have a good day!

Mozilla Developer Network CSS Flexbox

1 Like