Блог

Здравствуйте, я работаю над этой темой Shopify, которую я хочу настроить. Я взял нижний колонтитул и скопировал их так, чтобы они находились между меню и слайдером изображения. Я ничего не менял ни в css, ни в html (я просто переименовал идентификаторы и классы, которые повлияли на нижний колонтитул, и переименовал их). Но границы div и, возможно, div не выровнены и немного шире, чем остальная часть содержимого. Вот код и демонстрация:

 <div id="footer1"   >

  <div id="big-footer1" class="row">

    <div  class="desktop-4 tablet-2 mobile-3 alpha">

       <a href="/Shop/List/Gym_and_Fitness?cm_sp=homepage-_-fitnesst1-_-10-06-14" id="A_4"><img src="/mrporter/content/2014/home/100614/t1.jpg" alt="" id="IMG_5" /></a>
    <h2 id="H2_6">
           A SPORTING SUMMER:<br id="BR_7" />WHAT TO WEAR
    </h2>

    </div>

    <div class="desktop-4 tablet-2 mobile-3">


       <a href="/Shop/List/Gym_and_Fitness?cm_sp=homepage-_-fitnesst1-_-10-06-14" id="A_4"><img src="/mrporter/content/2014/home/100614/t1.jpg" alt="" id="IMG_5" />     </a>
                <h2 id="H2_6">
              A SPORTING SUMMER:<br id="BR_7" />WHAT TO WEAR
                    </h2>


    </div>       

    <div id="" class="desktop-4 tablet-2 mobile-3 omega">

       <a href="/Shop/List/Gym_and_Fitness?cm_sp=homepage-_-fitnesst1-_-10-06-14" id="A_4"><img src="/mrporter/content/2014/home/100614/t1.jpg" alt="" id="IMG_5" /></a>
    <h2 id="H2_6">
        A SPORTING SUMMER:<br id="BR_7" />WHAT TO WEAR
    </h2>
    </div>


  </div> 
  

И вот css:

 #big-footer1 { 
border-left: 1px solid {{ settings.footer-top-border }}; 
border-right: 1px solid {{ settings.footer-top-border }};
margin-bottom: 0px; 
margin-top: 0px;
border-bottom: 0px solid {{ settings.footer-bottom-border }}; 

list-style-type: none; 
}

#big-footer1 .alpha { border-right: 1px solid {{ settings.dotted_color }}; }
#big-footer1 .omega { border-left: 1px solid {{ settings.dotted_color }}; }






@media screen and (max-width: 740px) {
#big-footer1 .alpha { border-right: 0px solid {{ settings.dotted_color }}; }
#big-footer1 .omega { border-left: 0px solid {{ settings.dotted_color }}; }
}


#big-footer1 { color: {{ settings.footer-text-color }}; }
#big-footer1 a { color: {{ settings.footer-text-color }}; }



#big-footer1 > div { padding: 0 20px; min-height: 120px;}


#big-footer1 ul {
list-style: none;
 margin: 0;
line-height: 34px;
}

#big-footer1 ul li { display: inline-block; margin: 0 5px; }

#footer1 { background: {{ settings.footer-background }}; padding-bottom: 20px; text-align: center; }
  

Код имеет ширину, превышающую 100%, поэтому он не выровнен должным образом. Строка кода, которую вы ищете, это: .gridlock .row .row 102.083% , которая, согласно моему браузеру, находится в строке 19 stylesheet.css . Это влияет на ширину <div id="big-footer1" class="row">