Как установить второй логотип вниз экрана?

Подскажите пожалуйста, как на мобильных устройствах установить логотип Google вниз экрана? На пк с кода элемента он стоит внизу: введите сюда описание изображения

но с телефона выглядит это вот так: введите сюда описание изображения Вот пример накидал того: как это должно выглядеть: введите сюда описание изображения

HTML:

<div class="page"> 
        <div class="_container"> 
            <div class="page__logo"> 
                logo 
            </div> 
            <div class="page__title">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum quisquam nulla aperiam numquam ex sequi quas itaque eius deserunt voluptatem.</div> 
            <div class="page__actions actions"> 
                <div class="actions__logo"> 
                    <img src="img/google.svg" alt=""> 
                    Logo 
                </div> 
                <a href="" class="actions__button">Кнопка</a> 
            </div> 
        </div> 
    </div>

CSS:

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
 
body { 
    color: #000; 
    background-color: #E3EDFF; 
} 
 
img { 
    pointer-events: none; 
} 
 
strong { font-weight: 400; } 
 
a { text-decoration: none; } 
 
.page { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    height: 100vh; 
} 
 
._container { 
    max-width: 965px; 
    width: 100%; 
    margin: 50px auto; 
    padding: 0 15px; 
    text-align: center; 
} 
 
.page__logo { 
    margin-bottom: 50px; 
} 
 
.page__title { 
    margin-bottom: 50px; 
    font-size: 48px; 
    font-weight: 300; 
} 
 
.page__actions { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 
 
.actions__logo { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
} 
 
.actions__logo span { 
    font-weight: 300; 
    font-size: 24px; 
} 
 
.actions__button { 
    color: #fff; 
    background-color: #000; 
    padding: 20px 35px; 
    text-align: center; 
    font-size: 24px; 
    font-weight: 300; 
    border-radius: 40px; 
} 
 
@media (max-width: 600px) { 
    .page { 
        justify-content: space-between; 
    } 
 
    ._container { 
        padding-top: 50px; 
    } 
 
    .page__title { 
        font-size: 22px; 
    } 
 
    .page__actions { 
        flex-direction: column; 
    } 
     
    .actions__logo { 
        align-self: flex-end; 
        width: 100%; 
        position: fixed; 
        top: 0; 
        bottom: 50px; 
        left: 0; 
        right: 0; 
    } 
 
    .actions__logo img { 
        width: 28px; 
        height: 28px; 
    } 
 
    .actions__logo span { 
        font-size: 20px; 
    } 
 
    .actions__button { 
        font-size: 16px; 
        padding: 13px 28px; 
    } 
}

Был вариант растянуть container на весь экран и просту дать ему space-between при это сделая его колонкам. Но есть одно но. К меня появляется скролл и даже при помощи gap невозможно угадать отступ снизу с разных устройств.


Ответы (0 шт):