Смещение строки начальной загрузки по вертикали при изменении размера экрана

Когда я смотрю на свой сайт портфолио ( https://grimzero.github.io/Portfolio/ ), у меня появляется окно проектов, которое я пытаюсь сделать отзывчивым. Проблема, однако, заключается в том, что всякий раз, когда я изменяю размер экрана, строка, в которой они находятся, смещается вниз к середине экрана, и я понятия не имею, почему это произойдет.

Есть некоторые странные вещи, происходящие в этом HTML, но я не понимаю, что. Может ли кто-нибудь указать мне, что может происходить здесь?

<div class="row">
    <app-about class="col-md-6 col-sm-12 col-lg-4"></app-about>
    <div class="col-6 row p-0">
        <router-outlet></router-outlet>
<!--the projects angular component is put here with the router-->
    </div>
</div>

Это компонент проектов

<div class="container" style="margin-left: 15px;">
    <div class="row">
        <app-project *ngFor="let project of filtered | async" 
        [project]="project" class="p-0"></app-project>
    </div>
</div>

который показывает коллекцию этого объекта

<div [routerLink]="project.route" routerLinkActive="active" class="p-0"
    style="background-color: rgba(0, 0, 0, 0.1); width: 150px;">
    <img [src]="project.preview"
        [ngStyle]="{'max-width.px': project.thumbnailSize, 'max-height.px': project.thumbnailSize}">
</div>

введите описание изображения здесь введите описание изображения здесь

Обновить: введите описание изображения здесь

Всего 2 ответа


Постарайтесь задать для контейнера app-project height: 100% , чтобы он всегда занимал всю высоту родительского элемента.


<app-about _ngcontent-tdo-c2="" class="col-md-6 col-sm-12 col-lg-4" _nghost-tdo-c3="">
<div _ngcontent-tdo-c2="" class="col-6 row p-0">

Здесь вы должны использовать что-то похожее на:

<div _ngcontent-tdo-c2="" class="col-md-6 col-sm-12 col-lg-8 row p-0">

Другой рукой после упомянутого div есть тег app-project, который должен содержать класс контейнера. (после этого удалите контейнерный класс из div)

<app-projects _nghost-tdo-c5="" class="container">

введите описание изображения здесь


Есть идеи?

10000