Отзывчивый логотип CSS

Question

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

hr.stylelogo { 
    border: 0; 
    height: 1px; 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 
    box-sizing: content-box; 
    margin-bottom: 1.5em; 
} 
hr.stylelogo:after { 
    content: url(http://the_image); 
    display: inline-block; 
    position: relative; 
    top: -14px; 
    padding: 0 10px; 
    background: #ffffff; 
    color: #8c8b8b; 
    font-size: 16px; } 

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

В моем файле header.php у меня есть следующие:

<!-- LOGO BLOCK STARTS HERE --> 
    <div id="logo"> 
<div align="center"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><hr class="stylelogo"></a><br /> 
</div><!-- end #logo --> 
    </div> 
<!-- LOGO BLOCK ENDS HERE --><br /> 

#logo не работает в ориентации фактического изображения логотипа.

Любые предложения, которые были высоко оценены. HNY!

Answer 1

ОК, поэтому я решил это к моему удовлетворению. Я добавил еще один div для мобильного логотипа, который я не показывал, пока он находится в обычном режиме. Логотипы выключаются в соответствии с мультимедийным вызовом, соответствующим ширине логотипа:

@media all and (max-width: 32.5em) { 
#logo {display: none; } 
#mobilelogo{display:block;} 
}