Need Help with image align

Hi there, I’ve completed this challenge but I can’t figure out how to align my image on the same row. I would love to hear your feedback too.
https://codepen.io/zaqxsw/full/yLYddNP

1 Like

The display flex has to be set on the parent element. Create a div wrapping all the tiles, leave out the paragraph (beginning of section).
The page looks great, but needs a clean up of code.
The navigation bar should have z-index:999.

I am reviewing your code

Thanks a lot, it looks better now. https://codepen.io/zaqxsw/full/yLYddNP

Yes, it does look better. Happy to help, if you like I can link you to a fork of your project where I wrote some changes, with comments for you.

hi @chiara79

as for information, you should analyze your html, theres some element without closing tag.

Here is what I did, in case you want to take a look…
https://codepen.io/santimirandarp/pen/eYpqrLm

Thank you! The comments are very clear, I’ve learned a lot from it.

Thanks, I’ll fix it. My codes are too messy and I always forget closing tag , but I’ll definitely improve it .

Welcome, feel free to ask and to fork my fork
:slight_smile:

1 Like

Hi @chiara79. Some feedback on your portfolio project;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to a font would go in the box labeled ‘Stuff for <head>’
    • Mentioning because you have the head element inside of the body element. This is incorrect. I comes before the body element. What goes in the body element is what would be displayed by the browser.
    • The meta element also belongs in the head element. It doesn’t stand alone.
    • The link to FCC’s test script is JS, it therefore goes right before the closing body tag. It wouldn’t work if it was in the head element.

Codepen is forgiving that’s why your not seeing issues with these errors.

Once you have codepen set up correctly;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • The page needs to be responsive. There’s a horizontal scrollbar on smaller screens.
    • I looked at some of your other projects. They have the same issue. Remember, the R in RWD stands for Responsive

I took a look at one of your other projects, the survey form and found;

  • element formatting is incorrect. Do it the codepen way and just put in what goes between the body element.
    • for all of your pages. Once you have them with the fonts in codepen’s “stuff for head”, use their meta element, etc, click on the “export” button in the bottom right. Open that file and you’ll see how to correctly format all the elements.
  • User’s should be able to click on the label to select, not just the radio button / checkbox
  • Don’t use <br> to force spacing. Use CSS
  • change the cursor to a pointer when hovering over the submit button
1 Like