Как увеличить ширину веб-сайта с помощью CSS?

Question

Предположим, что я являюсь администратором a certain website.

Я использую последнюю версию Wordpress, моя тема - детская тема темы «Двадцать четырнадцать». Я использую Mozilla Firebug для проверки элементов, которые я хочу редактировать.

Страница не отображается в полной ширине, и все еще остается неиспользованное пространство слева (оно видно справа). Я хотел бы расширить страницу. Как это сделать? У меня есть шаблон полной ширины, поэтому установка всех страниц на него не работает.

Я ищу решение для CSS (для редактирования style.css моей дочерней темы).

Если бы кто-нибудь мог мне помочь, я был бы очень благодарен. :)

Answer 1

Вы можете попробовать переопределить этот CSS код:

.site { 
    width: 100%; 
    position: relative; 
    margin-left: 0px; 
} 
.site-header { 
    position: relative; 
    width: 100%; 
    z-index: 4; 
} 

В противном случае, если вы выбираете рамки, то вы можете легко интегрировать и понять «matirialize CSS» ИЛИ Bootstrap. http://materializecss.com/about.html

Answer 2

Итак, вы хотите получить полную страницу ширины?

У меня есть предложение для вас:

1. Используйте CSS Framework как Bootstrap

Bootstrap позволит сделать полную страницу ширины без каких-либо проблем. Кроме того, это сделает ваш сайт отзывчивым. Read more....

2. Используйте свой собственный CSS

Вы должны сделать ваше тело использовать все пространство есть. Вы не можете просто использовать

body 
width: 100%; 
height: 100; 
} 

Это сделало бы тело занять столько места, сколько нужно детям. Тело всегда имеет некоторый запас и отступы. Поэтому вам тоже нужно избавиться от этого.

body { 
margin: 0; 
padding: 0; 
} 

Последний шаг в вашем CSS будет фиксированное положение для всех 4-х сторон и сделать положение относительно:

body{ 
position: relative; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
} 

Так что ваш окончательный CSS должен выглядеть следующим образом:

body{ 
    position: relative; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 

Я предлагаю вам использовать Framework, что значительно упростит ваш рабочий процесс.

С уважением, Megajin