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!
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.
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!