Как Imake реагирует на мою страницу входа, чтобы кнопка входа не исчезала? - PullRequest
0 голосов
/ 21 января 2020

Я создаю страницу входа. Однако при уменьшении размера экрана кнопки входа исчезают.

Есть ли способ адаптировать страницу ко всем типам куполов, чтобы кнопки никогда не исчезали?

Я уже изменил px в%, но это тоже не сработало.

DEMO

CODE

<div style="width: 100%;height: 100%;">
    <div class="mainImageBackground">
        <div class="row">
            <div class="col-md-12 col-lg-6">
                <div class="logoAndContentIntro animated slideInDown-25 delay-1s slow">
                    <img src="https://cdn3.iconfinder.com/data/icons/brain-games/1042/Chess-Game.png" class="logoIntro">
                    <h1>Puribus Unum<br> blablabla blabla bla</h1>
                    <p>Welcome a world xxxxx to sdasdasdasd, improve,<br> asdasdasd and asdad blaabla
                        <br><br> asdasd asdasdas has asdasda asdasd soss asdasdsad.</p>
                    <div class="btnLoginRequest">
                        <button>Login</button>
                        <button>Exit</button>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-lg-6">
                <div class="div1Animated">
                    <div style="width: 100%;height: 100%;display: flex;justify-content: flex-end;padding: 14.81% 7.24% 0 0;">
                        <img src="https://cdn.vox-cdn.com/thumbor/gRuFFf19_xr7z1E8hJ12bkOmF2E=/0x0:1980x1320/1400x933/filters:focal(832x502:1148x818):no_upscale()/cdn.vox-cdn.com/uploads/chorus_image/image/65613211/microsoftedgenewlogo.5.jpg" width="826px" height="608px" class="landingPageDesktop animated fadeInDown delay-1s slow">
                        <div class="imageHide">
                            <img src=""  width="100%" class="animated fadeInUp delay-1s slow">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

1 Ответ

1 голос
/ 21 января 2020

Причина Определена

Ваши кнопки исчезают из-за следующего кода.

Непрозрачность: 0 скрывает весь ваш Div. Вам необходимо переопределить логи c.

@media only screen and (max-width: 767px)
.logoAndContentIntro {
    top: 100%;
    background-color: white;
    background-image: url(~/assets/home2_tablet.svg);
    background-position-y: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    margin: 0;
    padding: 0px 32px;
    position: absolute;
    z-index: 5;
    width: 100%;
    /* opacity: 0; */
}

Code Sample from Codeply

Snapshot with Buttons

...