Landing Page Problem!

Code Feedback
1

I have spent the past few hours trying to figure this problem out. I’m going to try and remake the entire project because for the love of me I can’t figure out why the footer shoots up to the center of the services section after you past 985px width.

chrome_2018-10-12_00-59-22
chrome_2018-10-12_00-59-22820×851 23.5 KB

Here’s the project

2

Hi !

There is a problem with your height values.
Values are settled for an horizontal display. But, when you reduce width, flex-wrap property moves the elements to a vertical display and height value is not sufficient enought.

Here the part you need to change with medias query (or rewrite differently).

:slight_smile: !

/* Services Styles */
#services {
  height: 400px;
}

#services-wrapper {
  width: 100%;
  height: 400px;
  display: flex;
}

.service-container {
  margin: 0 auto;
  display: inline-block;
  margin: 25px auto;
  width: 250px;
  height: 150px;
  text-align: center;
  font-size: 20px;

}
3

Ok so I went in and removed the heights from all 3 and it fixed the problem. So I’m not sure if I totally understand what you said the problem was. Pretty much I was setting a default height of 400px but when everything was I guess calculated…the content inside the #services section was larger causing it to mess up the flow of my page? So by removing the height that I set. The height was calculated automatically by the content within fixing the entire problem?

4

When you’re setting a height like

height: value;

The heigth is fixed and cannot be more or less.

A solution is to set a

min-height: value;

To be sure to fill a minimal given space and expanse if needed.