Как выровнять блок с помощью CSS


Verticalx
580

Добрый день,

Сделал сайт на Битрикс24, все норм, только есть одна мелкая проблем, которая режет глаз.

Блок соцсетей в самом вверху страницы съезжает вверх.

Сайт https://crewbus.ru

Как его выровнять?

Я слышал, что это можно сделать с помощью кастового CSS кода. У меня есть опция куда его вставлять, но что вставлять я даже примерно не представляю.

Буду благодарен помощи, или, хотя бы наводке.

Спасибо заранее

Вот этот блок:



png

1.png


Samail

.landing-block-socials-container {
display: flex;
}
ul.landing-block-cards-social.list-inline.g-pa-10--md.g-mb-0.row.align-items-center.justify-content-center.justify-content-sm-start {
padding-bottom: 0!important;
}


Verticalx

Samail:

.landing-block-socials-container {

display: flex;
}
ul.landing-block-cards-social.list-inline.g-pa-10--md.g-mb-0.row.align-items-center.justify-content-center.justify-content-sm-start {
padding-bottom: 0!important;
}

КРУТО!! Спасибо!

Помогло:)

Только теперь в мобильной версии они уплыли слево… можно их как-то в мобильной версии выровняться по центру экрана?

Спасибо заранее

Вот:



png

191393.png


Samail

.landing-block-socials-container {

display: flex;
}

Замените на:


@media(min-width:576px){
.landing-block-socials-container {
display: flex;
}
}


Verticalx

Samail:

.landing-block-socials-container {

display: flex;
}

Замените на:


@media(min-width:576px){
.landing-block-socials-container {
display: flex;
}
}

А с этим что-то не получается 🙁


onep

Verticalx:
А с этим что-то не получается

Может, не стоило трогать CSS, а просто поправить классы контейнера?


<div class="landing-block-socials-container col-sm-4 col-md-3 g-mb-10 g-mb-0--md">

Как-то так:


<div class="landing-block-socials-container d-block d-sm-flex col-12 col-sm-4 col-md-3 g-mb-10 g-mb-0--md">


Samail

Verticalx:
А с этим что-то не получается

Не дополнительно к

.landing-block-socials-container {

display: flex;
}

а вместо него, сейчас у вас на сайте и тот и другой код есть.


Verticalx

Аа я понял.

Блин только проблема в том, что этот сайт сделан на Битриксе24, то есть по типу тильды… у меня нет доступа к исходному коду чтобы подправить… все что я могу добавлять – это свой CSS и HTML вставки в страницы делать

сайт собирается как конструктор из блоков…..

а нет такого кода CSS, чтобы заблокировать действие этого?:

.landing-block-socials-container {

display: flex;
}

или ставить внутрь этого кода условие?


onep

Verticalx:
а нет такого кода CSS, чтобы заблокировать действие этого?

Вам Samail предложил решить проблему медиа-запросом. Перечитайте его топик, Вы добавили, а не заменили


Verticalx

Так, если я правильно понял, нужно сначала удалить код

.landing-block-socials-container {

display: flex;
}

а вместо него вставить:

@media(min-width:576px){

.landing-block-socials-container {
display: flex;
}
}

Но я не могу удалять существующий код.. у меня нет доступа к исходному коду.. Я могу делать только CSS вставки и добавлять свой HTML

———- Добавлено 24.04.2020 в 12:35 ———-

onep:
Может, не стоило трогать CSS, а просто поправить классы контейнера?


<div class="landing-block-socials-container col-sm-4 col-md-3 g-mb-10 g-mb-0--md">

Как-то так:


<div class="landing-block-socials-container d-block d-sm-flex col-12 col-sm-4 col-md-3 g-mb-10 g-mb-0--md">

Можно эту правку внести с помощью “CSS иньекции”?


ivan-lev

Verticalx:
нужно сначала удалить код

Который Вы вставляли тремя постами выше..

Verticalx:
КРУТО!! Спасибо!
Помогло

Или к своим вставкам тоже доступа уже нет?

Всех пускать, никого не выпускать?.. 😂

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *