Hello everyone, I just finished the tribute page project but I’m struggling to make the “Filmography” section responsive. I want it to be displayed in a different way, either 2 rows for medium width (Ipad) or one column for small width (iPhone X and all mobile devices).
here is the link: https://codepen.io/darrylat/full/yLVyvQz
Hi there,
Your page looks nice. Just so you know, you don’t have to add the head information in the html. Codepen does all that for you. Also, don’t forget to add the test script so you can make sure all the tests pass before submitting your project.
To make your filmography section responsive, add flex-wrap to your .box4 class so the film images will flow to the next line.
Then, with a media query, set the flex direction to column at the point where the images wrap so that there is three on one line and one on the next. With this method there may always be a screen size where it wraps to three on top and one underneath. There may be another way to do this that solves that issue.
Hope that makes sense.
1 Like
Hey, I really appreciate the help. It definitely make sense to use wrap. How does one add the test script to the project before submitting it?
Hi @akretchakre !
You can throw this at the bottom of the html page
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
Right now you are passing 9/10 tests.
1 Like
Thank you for the tip, I’m going to find the one I am missing right now .
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.