Personal Portfolio Project - reduce space between welcome-section & project section

Code Feedback
1

I have been working on my personal portfolio project and discovered that the spacing between the welcome-section and the project-section is too much when viewed using the full page option. The spacing between the welcome-section and the project-section is too much. All the other sections are pretty okay in my opinion. I have set the margin and padding to 0, still not working. I have created a div-section for the projects section and set the margin and padding to 0, still not working.

I am so confused and do not know what to do again. Suggestions are highly appreciated. Thank you for taking the time to respond to my query.

2

Hi there @aquiADA1

The unwanted spacing between the welcome-section and the project section is due to the value you have set to the height attribute in the welcome-section as seen below

#welcome-section {
height: 100vh;
}

Adjusting this value will change the spacing between the welcome-section and the project-section. I recommend messing around with the values by inspecting the element

Example

height

setting the new height to 69vh gives the following effect…

size
size1366×627 40.2 KB

The lower you set the height value, the less space there will be between each section.

Hope this helps!

3

Its problem in height at:

#welcome-section {
    height: 100%;
   }
4

Hi there @Kyle-S-Thompson I played around with the height and it worked, but the tests for making welcome-section == viewport has failed. I dont know what to do again.

5

Hi there @stefika

so I should put the height at 100% or reduce the figure ? The value for the height is 100vh not 100%… so what do I do ?

6

@aquiADA1

The viewport refers to the visible area of the web page when you load, meaning the FCC test suite wants you to have the welcome section to equal the viewport height. (the visible space at any given time of the web page.)

Due to you only have a small sentence in this section, it leaves the rest of the area blank, as it is filling the viewport. Being a requirement to pass the test, nothing can really be done (to my knowledge) to ‘lessen’ the space between the two sections.

What I do suggest is maybe adding some more content inside of the #welcome-section so that it does not feel so empty, or maybe make your Hello, I am Lily and I design web sites. larger, and center it inside of the section.

Hope this helps,
-Kyle

7

My suggestion is that you ‘never’ use height for sections, because you will never know how much height you need, its just a random guess… Just fill up with content and if you want to have some space, use margins or paddings

1 Like
8

@stefika this is a requirement within the FCC test’s to pass the project, while I do feel there is a place for the height property outside of this project, I don’t completely disagree in the sense that there are other ways to approach this.

Again, this is a requirement for this FCC project however.

9

@Kyle-S-Thompson
Ah, okay, my bad.
Ofc that is height very important, but not in this case, its very bad, thats my opinion… You can somehow manage to use height, but you will have big big problems in responsive, because you are using height like that.

Still, in responsive you will waste lines of codes for every media queries just to set height and again you will have problems.
The best code is no code at all. :stuck_out_tongue:

10

@stefika and @Kyle-S-Thompson Thanks so much for your inputs. I have been able to learn so much for the thread. Its really appreciated.

1 Like