Выполнение ответного нижнего колонтитула с изображениями внутри

Question

Я пытаюсь сделать отзывчивый нижний колонтитул без использования бутстрапа. Просто css, но что-то не так. Кнопки в нижнем колонтитуле также представляют собой изображения, а не текстовые ссылки. Структура колонтитула является

<div id="footer"> 
    <ul> 
     <li><a href=""><img src="images/button.png" width="221" height="61" id="Image26"></a> </li> 
     <li><a href=""><img src="images/button.png" width="221" height="61" id="Image27"></a></li> 
     <li><a href=""><img src="images/button.png" width="221" height="61" id="Image25"></a> </li> 
     <li><a href=""><img src="images/button.png" width="221" height="61" id="Image24"></a></li> 
    </ul> 
    <p>Copyright &copy; | all rights reserved.</p> 
</div> 

Это CSS нижнего колонтитула

#footer{ 
    background: url(../images/bg-footer.png) repeat-x center top; 
    min-height: 300px; 
    margin-top: -45px; 
    overflow: hidden; 
    background-position-x: -15px; 
} 

#footer ul { 
    list-style: none; 
    margin: 50px auto 0; 
    overflow: hidden; 
    padding: 0; 
    width: 960px; 
} 

#footer ul li { 
    float: left; 
    height: 60px; 
    line-height: 60px; 
    margin: 0 0 0 25px; 
    width: 220px; 
} 

#footer ul li:first-child { 
    margin: 0; 
} 

#footer ul li a { 
    background: url(../images/bg-menu1.png) no-repeat 0 -70px; 
    color: #2B0D05; 
    display: block; 
    font-family: 'PlayballRegular'; 
    font-size: 30px; 
    text-align: center; 
    text-decoration: none; 
} 

#footer ul li.current a, 
#footer ul li a:hover { 
    background: url(../images/bg-menu1.png) no-repeat 0 0; 
    font-family: PlayballRegular; 
} 

#footer p { 
    margin: 80px 0 0; 
    text-align: center; 
    text-transform: lowercase; 
} 

Результатом является то, что при изменении размера окна есть 3 кнопки вместо 4 и <p></p> становятся невидимыми.

Вот JSFFIDLE того, что я до сих пор пробовал.

Answer 1

@media only screen and (max-width: 480px) { 
#footer ul li a img { 
    max-width: 100%; 
    display: block; 
    /* height: auto; */ // may b this thing makes the change for this resolution. 
} 

Попробуйте изменить этот раздел селектора медиа-роликов css, эта помощь может помочь вам.

теперь вот это изменение для <p> тега

#footer p { 
    margin: 80px 0 0; 
    text-align: center; 
    text-transform: lowercase; 
    color: white; // to show white colored text only. 
} 

@media only screen and (max-width: 480px) { 
#footer { 
    /* max-height: 0; */ // this thing was causing for <p> tag that was not showing 
    overflow: hidden; 
    width: 100%; 
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm6W-Dhy2DYzedY8Y9dXl7HypMH6IQoJxWG-VQ4igf4Dhep0yC0knRYOZX); 
    width: 100%; 
} 

изменения выше двух изменений, где я изменился, что может помочь вам, что вам нужно