Форум Сайтостроение Веб-строительство

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

12
V
На сайте с 16.03.2010
Offline
77
Verticalx
597

Добрый день,

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

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

Сайт https://crewbus.ru

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

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

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

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

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

png 1.png
Samail
На сайте с 10.05.2007
Offline
366
Samail
#1 

.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;
}
V
На сайте с 16.03.2010
Offline
77
Verticalx
#2
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
На сайте с 10.05.2007
Offline
366
Samail
#3 

.landing-block-socials-container {

    display: flex;

}

Замените на: 


@media(min-width:576px){

.landing-block-socials-container {

    display: flex;

}

}
V
На сайте с 16.03.2010
Offline
77
Verticalx
#4
Samail:
.landing-block-socials-container {

    display: flex;

}

Замените на: 

@media(min-width:576px){

.landing-block-socials-container {

    display: flex;

}

}

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

O
На сайте с 30.09.2019
Offline
18
onep
#5
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
На сайте с 10.05.2007
Offline
366
Samail
#6
Verticalx:
А с этим что-то не получается

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

.landing-block-socials-container {

    display: flex;

}
а вместо него, сейчас у вас на сайте и тот и другой код есть.
V
На сайте с 16.03.2010
Offline
77
Verticalx
#7

Аа я понял.

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

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

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

.landing-block-socials-container {

    display: flex;

}

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

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
O
На сайте с 30.09.2019
Offline
18
onep
#8
Verticalx:
а нет такого кода CSS, чтобы заблокировать действие этого?

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

V
На сайте с 16.03.2010
Offline
77
Verticalx
#9

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

.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 иньекции"?

IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#10
Verticalx:
нужно сначала удалить код

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

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

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

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

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий