Как прописать стили к конкретной строчке кода для моб версии?

Question

[Makfroy]

Всем привет, нужна помощь, мне к определенной строчке необходимо прописать стили в моб версии:

@media (min-width: 768px) and (max-width: 991px) {
... {

  }
}

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

Вот строчка к которой нужны стили:

<a style="position:absolute;font-size: 24px;top:-17px;right:-40px;" class="icon fl-bigmug-line-user144" href="#"></a>

Весь хтмл код:

<ul class="rd-navbar-nav">
                  <li class="active"><a href="1_main.html">Главная</a></li>
                  <li class="rd-navbar--has-dropdown rd-navbar-submenu"><a href="#">О компании</a>

                    <!--RD Navbar Dropdown-->
                    <ul class="rd-navbar-dropdown">
                      <li><a href="1_abo_1.html">Производство</a></li>
                      <li><a href="1_abo_2.html">Руководство</a></li>
                    </ul>
                    <!--END RD Navbar Dropdown-->
                    
                  <span class="rd-navbar-submenu-toggle"></span></li>
                  <li class="rd-navbar--has-dropdown rd-navbar-submenu"><a href="#">О продукте</a>
                    <ul class="rd-navbar-dropdown">
                      <li><a href="1_abo_3.html">Общая информация</a></li>
                      <li><a href="1_abo_4.html">Применение</a></li>
                      <li><a href="1_abo_5.html">Отзывы/рекомендации</a></li>
                    </ul>
                  <span class="rd-navbar-submenu-toggle"></span></li>
                  <li><a href="1_sho.html">Интернет-магазин</a>
                  </li>
                  <li><a href="1_dil_1.html">Дилерам</a>
                    <!--END RD Navbar Megamenu-->
                  </li>
                  <li><a href="1_blo_1.html">Блог</a></li>
                  <li class="rd-navbar--has-dropdown rd-navbar-submenu"><b><a style="position:absolute;font-size: 24px;top:-17px;right:-40px;" class="icon fl-bigmug-line-user144" href="#"></a></b>
                    <ul class="rd-navbar-dropdown">
                      <li><a href="1_use_1.html">Заказы</a></li>
                      <li><a href="#">Выйти</a></li>
                      <li><a href="1_use_2.html">Войти</a></li>
                    </ul>
                  <span class="rd-navbar-submenu-toggle"></span></li>
                </ul>

Прошу помочь пожалуйста, заранее спасибо.

Comments

[iBird Rose]

а зачем стилизовать через style?
задай элементу класс и нормально в media запросах пропиши стили для этого класса

[Makfroy]

iBird Rose: Там уже есть класс class="icon fl-bigmug-line-user144"

Сложность в том, как обратиться к этому классу в media?

[iBird Rose]

Владислав Марвин: так и обращаешься

@media (min-width: 768px) and (max-width: 991px) {
    .fl-bigmug-line-user144 {стили}
}

[one_day]

style="position:absolute;font-size: 24px;top:-17px;right:-40px;"

эта строчка будет перекрывать все ваши стили прописанный в медиа

[Makfroy]

iBird Rose: К сожалению не подошло, этот класс находится внутри нескольких классов, если посмотреть на весь html код. Там не короткая строка должна быть скорее всего, может с указанием что это ссылка (а) ?

@media (min-width: 768px) and (max-width: 991px) {
   ........ .fl-bigmug-line-user144 {стили}
}

[iBird Rose]

Владислав Марвин: можешь через путь. в чем проблема то?

.rd-navbar-nav .rd-navbar--has-dropdown .fl-bigmug-line-user144 {стили}

Answer 1

[one_day]

<a class="icon fl-bigmug-line-user144 new" href="#"></a>

.new {
position:absolute;
font-size: 24px;
top:-17px;
right:-40px;
}
@media (min-width: 768px) and (max-width: 991px) {
.new {
position:absolute;
font-size: 10px;
top:-2px;
right:-10px;
  }
}

Comments

[Makfroy]

one_day Спасибо, помогло