Bug 4 - Larger Space between two parts

[r9young]

[r9young]

Analysis

In the inspector, we can observe that the .flex-container-row class has a property of min-height: 60vh.

we also observe that there are two .flex-container-row in our css.

.flex-container-row {
    display: flex;
    flex-direction: row;
    /*min-height: 100vh;  /* Minimum height to cover the full viewport height */
    width: 100vw;       /* Width to cover the full viewport width */
}

.flex-container-row {
    display: flex;
    flex-direction: row;
    min-height: 60vh;  /* Minimum height to cover the full viewport height */
    /* width: 60vw; */
    /* width: 60vw;   bug-3*/
}

the effect on the website style is:

if the top css has the same property as the bottom one. It just cross it but include the new feature width:100vw;

[r9young]

Solution:

I delete the bottom one.

.flex-container-row {
    display: flex;
    flex-direction: row;
    min-height: 60vh;  /* Minimum height to cover the full viewport height */
    /* width: 60vw; */
    /* width: 60vw;   bug-3*/
}

[r9young]

Effect