Блог

Я пытаюсь адаптивно расположить значок, который является частью плагина в WordPress.

Использование margin-top и margin-bottom позволяет расположить значок дальше по странице, но top и bottom выше 10px , похоже, уменьшает высоту значка при использовании в сочетании с position: relative;

 @media(max-width: 768px) {
    #a2a_share_save_widget-3 {
        position: relative !important;
        top: 20px !important;
        left: 95%;
        margin-left: -37px;
        background-color: transparent! important;
        color: transparent! important;
    }
}
  

Если я уменьшу top до 10px , значок снова вернется на полную высоту.

HTML:

 <div id="a2a_share_save_widget- 3" class="widget widget_a2a_share_save_widget">
    <div class="a2a_kit a2a_kit_size_32 addtoany_list">
        <a class="a2a_dd a2a_counter addtoany_share_save addtoany_share" href="https://www.addtoany.com/share"></a>.
    </div>
</div>
  

Я хочу применить top или bottom для регулировки положения, а не высоты значка.

Мобильная страница здесь

Проблема не в том, что высота виджета share уменьшается. Проблема в том, что overflow: hidden передается его предку section — виджет share технически переполнен, и его части скрыты.

Итак, чтобы решить эту проблему, либо удалите / переопределите свойство overflow: hidden из section

 #content section {
    overflow: visible;
}
  

или пусть контейнер виджета занимает X минимальную высоту

 div#main {
    min-height: 80px;
}
  

Я полагаю, вы хотите повысить специфичность, поскольку эти примеры являются общими терминами, и вы используете тему WordPress