Блог

В настоящее время я вырезаю шаблон страницы продукта из темы Shopify Mobilia, и я не могу избавиться от отступов / отступов по обе стороны страницы. Я просмотрел CSS и безуспешно использовал Firebug.

Верхний колонтитул в порядке, но размер содержимого и нижнего колонтитула составляет около 50 пикселей слева и 80 пикселей справа на дисплее 1080p. Это нормально для содержимого с белым фоном, но немного уродливо для разделов с коричневым фоном.

Страница, о которой идет речь: http://higher-tea.com/products/subscription

Любые предложения с благодарностью принимаются.

Спасибо.

Я просмотрел ваш код, и он показывает, что

 div.container {
    margin: 0 auto;
    padding: 20px 0;
}
  

теперь margin:0 auto работает таинственным образом, он в основном выравнивает элемент по горизонтали, к которому он применяется, оставляя одинаковое поле с обеих сторон, я думаю, поэтому исходная ширина составляла 1080px, но теперь страница имеет ширину всего 960 пикселей (ссылка ниже)

 @media only screen and (max-width: 1199px) and (min-width: 960px)
.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}
  

таким образом, у нас остается 1080-960 = 120 пикселей, то есть, в основном, 60 пикселей 60 пикселей справа и слева, а также дочерний контейнер .container имеет длину всего 940 пикселей и не имеет выравнивания по центру, поэтому оставшиеся 20 добавляются в правое боковое пространство, создавая поля 60 и 80 пикселей с обеих сторон, надеюсь, это помогло(ссылка ниже)

 container .sixteen.columns {
    width: 940px;
}