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

Question

[0x80070005]

Подскажите пожалуйста, как на мобильных устройствах установить логотип 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; 
    } 
}

Answer 1

[Олег]

position: relative / absolute знаете ?
https://learn.javascript.ru/position
Ну и все как вы разложили на дивы вызывает вопросы.

Comments

[0x80070005]

А что не так? Зачем более сложная структура если ничего не будет?)

[Владислав Лысков]

0x80070005, тебя не смущает порядок?

[0x80070005]

Владислав Лысков, нет! Так а что не так? Предлагаешь разделить на шапку, контент?

[Владислав Лысков]

0x80070005, смотрим: на картинке у тебя сначала кнопка, затем лого
а в коде сначала лого, затем кнопка
почему так?

[0x80070005]

Владислав Лысков, ну, потому что на пк у меня слева логотип, а справа кнопка. На мобильности reverse и все. Такая задумка :)

[0x80070005]

Владислав Лысков, ну, не буду же я логотип оставлять впереди кнопки :)

[Владислав Лысков]

0x80070005, на самом деле, я просто вставил твой код в кодепен, и там радотает как надо
но, этот стиль вызывает вопросы

.actions__logo {
        align-self: flex-end;
        width: 100%;
        position: fixed;
        top: 0;
        bottom: 50px;
        left: 0;
        right: 0;
    }

убери оттуда фиксированную позицию со всем колдунством и стилизуй нормально так же как и верхнее лого

.actions__logo {
        width: 100%;
        position: relative;
        margin-bottom: 50px;
    }

[0x80070005]

Владислав Лысков, на codepen он действительно адекватно работает, но когда ты сайт открываешь именно с телефона, этот кусок кода ломается. У меня был вариант растянуть блок на весь экран и просто на actions кинуть space-between сделая при этом его колонками. Но есть одно но. У меня при растягивании экрана по высоте появляется скролл, поэтому я отказался от такого варианта

[Владислав Лысков]

0x80070005, нет, этот как-раз таки верный вариант, сейчас накидаю

[0x80070005]

Владислав Лысков, там при 100vh скролл появляется. Наверное, высчитывать бар нужно или это баг такой

[Олег]

0x80070005, если не получается в лоб. Ищи обходные пути.
Разверстай два лого. Сперва оба не видимы, а через медиа ксс селектор
потом сделаешь или -то или другое видимым

Answer 2

[Владислав Лысков]

ну очень грубо так
https://codepen.io/Vlatqa/pen/zYVbrMa

Comments

[0x80070005]

Вы не поняли наверное о чем я имею ввиду. Вот этот логотип который слева возле кнопки справа, на мобильности должен находиться внизу как прижат footer. При помощи флекса это сделать нельзя, т.к нельзя угадать gap его. Вот пример накидал:

скрин

Тут фишка в том, что его нужно при помощи absolute как-то прижать вниз, чтобы он с любого устройства смотрелся хорошо

[Владислав Лысков]

0x80070005, ты так толком не сделаешь, просто скрывай элемент на разных разрешениях

[0x80070005]

Владислав Лысков, не, это можно сделать адекватно, я сам даже делал, но не помню как :д

Answer 3

[Николай]

Здравствуйте, может так сойдет и если что, то подкорректировать под нужды.
Немного разметку изменил и классы
https://codepen.io/Delta01/pen/ZEdPXBj