0

Совсем новенький в этом, плюс верстка не моя, сайт не мой. Знаю что HTML & CSS грязный.

Собственно попросили добавить инфу в "Контакты", добавил, но в мобильной версии теперь идет слепка всех их.введите сюда описание изображения

Знаю, что через media запросы нужно сделать, но они уже прописаны были. Как можно это исправить?

Код, который я думаю с @media запросами: Все что смог понять и найти в этом бардаке.

    /* Map-area Start */
    .section-title-heading {
        padding: 0px 12px;
    }
    .map-location-area .getstarted-btn {
        left: 26%;
    }
    .map-location-area {
        background: transparent;
        padding: 80px 0;
        padding-top: 0;
        background-position: bottom right;
    }
    .single-location.toronto {
        width: 80%;
        text-align: left;
        left: 0;
        position: relative;
        margin-top: 0;
    }
    .single-location.toronto {
        /*! display: inline-flex; */
        background: #fff;
        z-index: 9;
    }
    .single-location h6 {
        float: left;
    }
    .single-location {
        height: 85px;
        border-bottom: 1px solid #efefef;
        padding-top: 10px;
        background: #fff;
        width: 100% !important;
        padding-left: 35px;
    }
    .single-location.sanfrancisco {
        position: relative;
        width: 80%;
        margin-top: 0;
        left: 0;
    }
    .single-location.newyork {
        position: relative;
        margin-top: 0;
        left: 0;
        width: 80%;
    }
    .single-location.london {
        position: relative;
        margin-top: 0;
        margin-left: 0;
        width: 80%;
    }
    .single-location.singapore {
        position: relative;
        width: 80%;
        right: 0;
        margin-top: 0;
    }
    .map-dropdown-address {
        margin-left: 15px;
    }
    .map-dropdown-address a {
        color: #2079ff;
    }
    .Dropdown-content {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        width: 74%;
        float: right;
        position: relative;
        right: 15px;
        bottom: 23px;
        background: transparent;
        box-shadow: none;
    }
    .Dropdown-content {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        width: 66%;
        float: right;
        position: relative;
        right: 15px;
        bottom: 23px;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        visibility: visible;
    }
    /* Map-area End */
 <!-- map start -->
    <section id="contacts">
    <section class="map-area">
        <div class="container section-padding">
            <div class="section-heading">
                <div class="row">
                    <div class=".col-xs-6 .col-sm-4">
                        <div class="section-title-heading">
                            <h2 style="
       font-size: 2.7em
    font-weight: 250;
">Контакты</h2><br>  
                    <p style="
    font-size: 1.6em;
    line-height: 30px;
                                                                            
" class="col-xs- col-md-4" style="margin-bottom: -15px;">г. Санкт-Петербург<br>
                    Наш телефон: <br><a href="tel:+79215979995">+7-921-597-99-95</a><br>
                    Наша почта: <a href="mailto:[email protected]">[email protected]</a>
                    </p>
                       <p style="
    font-size: 1.6em;
    line-height: 30px;
    
" class="col-xs- col-md-4 " style="margin-bottom: -15px;">420061, РТ, г. Казань, ул. Лево-Булачная, дом №52, офис №12.<br>
                              Наш телефон: <br><a href="tel:+7963237823">+7-963-23-78-23</a><br>
                               Наша почта:<a href="mailto:[email protected]">[email protected]</a><br>
                               </p>

                        <p style="
    font-size: 1.6em;
    line-height: 30px;
                                                          
" class="col-xs- col-md-4" style="margin-bottom: -15px;">г. Москва<br>
                                     Наш телефон: <br><a href="tel:+79033877871">+7-903-387-78-71</a><br>
                                     Наша почта:<a href="mailto:[email protected]">[email protected]</a>
                                     </p>
                        </div>

5
  • Зачем вы добавили стили от плагина Magnific Popup? Нужен html код для елементов которые "слипаются" и стили для них, которые вы применяете.
    – E_K
    3 ноя 2018 в 10:15
  • Вы правы! Попробовал найти, можете посмотреть!
    – Anton
    3 ноя 2018 в 10:40
  • Ваш пример не рабочий. Но, уже можно сказать, что вам нужно сделать медиа запрос с margin-bottom для тега p который содержит информацию.
    – E_K
    3 ноя 2018 в 10:53
  • Так понимаю margin-bottom: 15px ? А как сделать медиа запрос и куда его кинуть? буду очень благодарен за помощь!
    – Anton
    3 ноя 2018 в 11:06
  • Инлайновые стили у p нужно убрать, так как там отрицательный margin, новые стили поместить в основной css файл. Информации я дал вам достаточно, полностью выполнить за вас работу я не могу.
    – E_K
    3 ноя 2018 в 11:18

1 ответ 1

0

Наверное что типа такого

    @media (max-width: 576px) { //применять стили до ширины 576px
        .section-title-heading p{
               margin-bottom: 15px;
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.