Need help with layout and slideDown

1

I have almost finished the Wikipedia Viewer challenge, but there are three sticky things I can’t figure out. Hoping someone could give me some pointers.

First of all, here is the site:

Question 1:
The search results are displayed in<div id="display-articles"></div>, but this division does not vertically align with the row above it. There is a small space on the left and right side. I’ve looked up DevTools and played around with the margins, but nothing is working.

Question 2:
I thought that by putting this in a container and then a row, the design would be responsive. However, when I minimize the window, the “Random Article” section gets kicked out of the red background.

Question 3:
I want to slide down the <div id="display-articles"></div>, so that the articles appear in a sliding motion. My code $("#display-articles").html(displayData).slideDown("slow");obviously doesn’t work, but DevTools doesn’t show me anything that might suggest where the error is.

Thanks in advance!

2

Question 1

p#article {
    margin: 0 -15px;
}

Question 2
remove height: 55px; from .row (Line 13 in CSS box)

Question 3

#display-articles{
  display:none;  
}

Id should be unique for a page, but you have several <p> with id article. It would be good to change it from id to class.

1 Like
3

Hi Korzo, your pointers were really helpful - thank you!
I’m still struggling with centering the input form vertically though.

my CSS for this element is as follows:

input{
  width: 100%;
  padding: 6px;
  background-color:#eac67a;
  border-radius: 10px;
  border-width: 0px;
  text-align: center;
  outline: none;
  margin: auto;
}

I thought margin: auto would do the trick, but it`s not the case here. I’m not sure what else to add!