Project Landing Page Help

HTML-CSS
1

I am having an issue regarding the following test for the Product Landing Page project in the responsive web design lesson series.

  1. My product landing page should utilize CSS flexbox at least once.

AssertionError: We do not detect a display property set to flex or inline-flex anywhere in your CSS …

My codepen link for this project is: https://codepen.io/Mangoed/pen/mKXJXq

Could anyone give me any insight into this? I have implemented Flexbox multiple times from the best of my knowledge (an example being the code snippet below). Thanks!

#packages-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 3em 15% 0 15%;
}

1 Like
2

Hi Mangoed,

I looked at your project and I found the source of the error. So you started your CSS with @media query and continued to do so for the remainder of your CSS. For whatever reason the testing system was only able to detect the ‘display: flex;’ when it is applied to an element outside of an ‘@media’ query. I ran the test by just adding

body{
display:flex;
}

outside of your media queries and it worked well. I am fairly new at this myself but I found you had some redundancies in your CSS. Perhaps write the styles that are consistent regardless of the view-port size and then writing the specific media queries for mobile or larger viewing devices. I hope this helped.

Best regards,

J8

2 Likes
3

Thank you so much for the very helpful reply! That indeed did fix the error in the testing. I find your advice to be very helpful indeed regarding how to style in CSS for varying devices, I will definitely keep this in mind and apply it to my next project. Cheers and thanks once again!

2 Likes
4

I have used display flex ;
flex direction also… but It’s still showing me errors…
Even I have used @media query and it’s even working.
Please help me

5

Post a link to your codepen if you need help

1 Like