FCC Wikipedia Viewer With Wikipedia API

Please I need solid feedback on my work.
Also I have a few bugs
1 The searched output is not centered on the view port.
2 The submit button and search input is not centered on the viewport too.
I’ve tried various CSS methods used to center divs but I can’t seem to find one that works. I need help working on that. Thank You.
Here is the link to my project:

Hello @malloy

Overall your project is looking good, In my opinion, the button should be a bit smaller, I believe it should be in sync with the input box again that’s just my opinion.

You could also style your input search box, which can make your project look more attractive.

Give some space between the wiki logo and the search bar.

For centering the HTML elements

  1. Add the following CSS code
#SearchBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}
  1. Remove the following from your CSS
#search {
    margin-left: 30%;
}

and you should be all set

1 Like
  1. Change your background image. Visit unsplash for nice background images.

  2. I recommend you read this article How to Center Anything with CSS - Align a Div, Text, and More .

  3. You can center the input and button element. Controlling them by their parent element #SearchBox.

#SearchBox {
    display: flex;
    flex-direction: column;
    justify-center: center;
    align-items: center;
}

Why did you add 30% value to margin-left and margin-right in your input and button. That will not help center them.

  1. Change the font-family for your project. Visit https://fonts.google.com/.

  2. The colors of the text. Visit https://colorpalettes.colorion.co/ and chose nice Color Palettes

1 Like

Hi @liyaquathhassan Thanks for the honest feedback. I’ve centered the div with the code you provided. I’m revisiting my CSS (flex) course to brush up on it. I made the button bigger to make it more visible. I’m still working to finalize the project so I’d most likely style up the search box and give adequate spacing around the wiki logo.

I really appreciate your feedback I’m working on finalizing the project I’d change the font to make it more presentable. Thanks for the article you provided too. :palms_up_together:t6:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.