Как я могу изменить отступы CSS только для главной страницы / главной страницы - PullRequest
Новая
       86

Как я могу изменить отступы CSS только для главной страницы / главной страницы

0 голосов
/ 20 февраля 2019

На моем веб-сайте я добавил следующий код, который я только хотел применить к своим сообщениям, например this . 

@media screen and (min-width: 767px) {
p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
}

Очевидно, этобыл применен ко всем страницам на сайте.На некоторых страницах это нормально, но домашняя страница / главная страница 1009 * испорчена на компьютерах.Если вы прокрутите страницу вниз, к отрывкам (описаниям) под сообщениями будут наложены эти поля.

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

Это одно из предложений, которые мне дали люди, которые не сработали.Если я уменьшил число с 20%, ничего не произошло.Поля стали больше, если я увеличил отступы, как будто минимум установлен на 20%. 

.home .posts-loop .entry-summary{
  font-size: 21px;
  padding-right: 20%;
  padding-bottom: 10px;
  padding-left: 20%;
}

Ответы [ 5 ]

0 голосов
/ 20 февраля 2019

Жаль, что вы также поделились своим HTML.Но общий ответ заключается в том, что вы выбираете все элементы p в HTML-документе, чтобы иметь упомянутые отступы.Поэтому, конечно, он применяется повсеместно на странице.

Решение 1: Если они являются отдельными html-страницами, вы можете связать отдельные таблицы стилей и включить отступы только на нужные страницы.

Решение 2:Будьте более конкретны с селектором CSS.Например, если div-обертка для постов имеет класс .posts, напишите ваш css следующим образом: 

.posts p {
  font-size: 21px;
  padding-right: 20%;
  padding-bottom: 10px;
  padding-left: 20%;
}
0 голосов
/ 20 февраля 2019

Добро пожаловать, Ахмед.

Предположение, что люди дали вам то, что не работало, связано с именами классов (обратите внимание на точку перед именами: .home | .ports-loop | .entry-summary.Это указывает на то, что это классы).

В первом примере вы используете только p.Это влияет на все элементы p html.

Итак, ваше решение состоит в том, чтобы добавить класс к абзацам, где вы хотите применить правила CSS: 

<p id="xxxx" name="xxxx" class="SomeClass">

И затем в вашем CSSкод, используйте .SomeClass {...}, чтобы установить правила для применения.

Эти правила должны применяться только в элементах, установленных как class = "SomeClass", а не к другим элементам.

0 голосов
/ 20 февраля 2019

Простой способ обойти это - создать другую таблицу стилей для домашней страницы.Я не уверен, что если вы используете глобальную таблицу стилей, вам следует удалить строку, которая связывает CSS с этой страницей.

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

Cheers!Я надеюсь, что это помогает ....

0 голосов
/ 20 февраля 2019

Я бы предложил добавить класс к тегу p на домашней странице.HTML-код должен быть похож на 

<p class="homepagepara">blah blah blah.....</p>

И CSS будет выглядеть так.И это будет предназначаться только для абзацев главной страницы.Надеюсь это поможет.Дайте мне знать, если у вас есть еще вопросы

0 голосов
/ 20 февраля 2019

Для домашней страницы / титульной страницы просто дайте другое имя пользовательского класса и просто добавьте отступ к 0 или, если хотите, напишите «! Важное». Например, .cstm_home {padding: 0! Важно;}Я надеюсь, что это решит вашу проблему.

...