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

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

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

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

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

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

.home .posts-loop .entry-summary{
  font-size: 21px;
  padding-right: 20%;
  padding-bottom: 10px;
  padding-left: 20%;
}
Источник

5 ответов

Решение

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

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

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

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

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

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

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

Источник

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

Источник

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

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

И CSS будет как.

p.homepagepara {
    margin: 0;
    padding:0;
}

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

Источник

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

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

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

.posts p {
  font-size: 21px;
  padding-right: 20%;
  padding-bottom: 10px;
  padding-left: 20%;
}
Источник

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

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

Ура! Надеюсь, это поможет....

Источник
Другие вопросы по тегам