Hi
I’m trying to do a tribute page and also trying to implement all that’ve been learning. I decided i will try to make my site responsive using grid but i’m struggling with it a little and would really appreciate some help. I’m new at this and i certainly don’t understand everything. I inserted a picture in the first item in the container but it doesn’t fit, as you can see from the screenshot when the window is resized. Might have to do with the size of the picture not sure. I know my code might be a bit messy but will work on that. Look forward to the responses. https://codepen.io/Julesz_snow/pen/OJbNYPx
Screenshots don’t help when it comes to troubleshooting.
While you’re coding locally now you’ll have to put your code where it is publicly viewable and has a live demo when you submit it.
Provide a link to that so that someone can help.
On a side note, if this is the FCC tribute page page you’re working on there are many ways to make the page, and the image, responsive. However the tests only have one way of checking so you’ll want to make it responsive based on that. The instructions say;
You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js.
Make sure you’ve got the test script included in your project.
I was just using what i was comfortable with, i planned to transfer it to codepen when i finished but yeah you’re right, thank you.
I’m not too sure what you mean the tests only have one way of checking? I thought you could implement whatever you’ve been learning, as long as you meet the objectives of the user story? I’ve added the codepen link now. Also what does the “test script” do? I’ve not started learning javascript yet . Thanks for your response.
The test scripts are written to check that the user stories have been met. You don’t just implement what you’ve learned, you’ll have to do some researching too. For instance, in the survey form project there is an element that wasn’t taught in the FCC curriculum so you’ll have to do some research.
You don’t have to know JavaScript to utilize the test scripts. Just put it before the closing <body> tag. Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor so just put the test link at the top.
You’ll see a green hamburger menu in the upper left of your page. Select the appropriate project and click the ‘Run Tests’ button. Doing so kicks off the test scripts. If all tests pass the button will be green. If one (or more) tests fail the button will be red. Click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
I will say this. It’s easier if you meet as many of the user stories as possible prior to styling. Otherwise you run the risk of trying to make things fit.
There may be a user story that requires a media query later on. That’s why I say as many as possible.
When you do start working on styling and responsiveness start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.
1 Like
Oh okay I understand. Yes I’ve been doing research as well, i guess i’ll need to do more of it.
That makes sense, I got into trying to style too quickly.
I will do that. Thanks for your help and taking the time to respond.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.