Изменение положения элементов в зависимости от размера экрана пользователя. Как установить эти элементы для мобильных устройств?

Question

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

При просмотре на рабочем столе, футер выглядит следующим образом: Website Footer viewed on Desktop

Код, используемый для создания этого взгляда является:

<meta name="color:Footer Background Color" content="#000000">

CSS CODE 
 

 
/*----------------------------- 
 
     footer 
 
-----------------------------*/ 
 
.bottom-footer { 
 
    background-color: solid #ffffff; 
 
} 
 
.bottom-footer, .bottom-footer a, .back-to-top a { 
 
    color: solid #000000; 
 
} 
 
.footer-message { 
 
    display:flex; 
 
    justify-content:space-between; 
 
    list-style-type:none; 
 
    width:500px; 
 
} 
 
.bottom-footer { 
 
    clear: both; 
 
    height: 80px; 
 
    width: 100%; 
 
    position: relative; 
 
    bottom: 0; 
 
    z-index: 1 
 
} 
 
.bottom-footer p { 
 
    font-size: 1.4rem 
 
} 
 
.footer-message { 
 
    float: left; 
 
    margin-top: 33px; 
 
    margin-left: 20px 
 
} 
 
.creation { 
 
    float: right; 
 
    display: block; 
 
    margin-top: 33px; 
 
    margin-right: 20px; 
 
    font-size: 1.4rem 
 
} 
 
.back-to-top { 
 
    position: absolute; 
 
    margin-top: 20px; 
 
    text-align: center; 
 
    left: 0; 
 
    right: 0; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 30px 
 
} 
 
.back-to-top a { 
 
    font-size: 3rem; 
 
    -webkit-transition: all .4s ease-in-out; 
 
    -moz-transition: all .4s ease-in-out; 
 
    transition: all .4s ease-in-out 
 
} 
 
.back-to-top a:hover { 
 
    opacity: .5; 
 
    text-decoration: none 
 
} 
 
.back-to-top .fa-angle-up { 
 
    font-size: 4rem 
 
} 
 
footer.bottom-footer { 
 
     height: 150px 
 
    } 
 
    .footer-message { 
 
     padding: 40px 0 0 
 
    } 
 
    .creation, 
 
     padding: 10px 0 0 
 
    } 
 
    .creation, 
 
    .footer-message { 
 
     float: none; 
 
     text-align: center; 
 
     margin: 0 
 
    } 
 
    .back-to-top { 
 
     margin-top: 0; 
 
     top: 0 
 
    }

HTML CODE 
 

 
<footer class="bottom-footer"> 
 
    <p class="footer-message"> 
 
     <a href="/" style="font-size:1.4rem">Home</a> 
 
     <a href="/about" style="font-size:1.4rem">About</a> 
 
     <a href="/news" style="font-size:1.4rem">News</a> 
 
     <a href="/musings" style="font-size:1.4rem">Musings</a> 
 
     <a href="/music" style="font-size:1.4rem">Music</a> 
 
     <a href="/media" style="font-size:1.4rem">Media</a> 
 
     <a href="/shows" style="font-size:1.4rem">Shows</a> 
 
     <a href="/store" style="font-size:1.4rem">Store</a> 
 
     <a href="/contact" style="font-size:1.4rem">Contact</a> 
 
     <a href="/ask" style="font-size:1.4rem">Ask</a> 
 
    </p> 
 
    <a class="back-to-top" href='#'>^<i class="fa fa-angle-up"></i></a> 
 
    <div class="creation" style="text-decoration:none"> 
 
     © 2016 Sam Joel Nang. All Rights Reserved. 
 
    </div> 
 
</footer>

Теперь проблема, когда (например) ширина окна уменьшается, элементы нижнего колонтитула, похоже, рассеиваются, элемент .creation выходит из нижнего колонтитула и идет ниже.

Что я хочу делать (когда сайт просматривается в малой ширине окна или на экранах мобильных устройств) является «центром» и «стеком» элементов нижнего колонтитула (.footer-message, .back-to-top, и .creation) в следующем порядке: top: .back-to-top, middle: .footer-message и bottom: .creation, с цветом фона нижнего колонтитула #ffffff. Небольшое редактирование фотографий может представлять собой то, что я имею в виду: Ideal Website Footer look on Mobile Device or small Desktop window width

Я надеюсь, что кто-то может мне помочь. Огромное спасибо.

Answer 1

Введение медиазапросы

Для того, чтобы достичь того, что вы ищете, вы можете использовать медиа-запросы в CSS.

Например, если вы хотите, чтобы стек колонтитул элементов в ширине экрана не 480px или менее, следующий запрос СМИ позволит вам стиль только для этого сценария:

@media (max-width: 480px) { 
    // Styles here 
} 

Учитывая, что, давайте до точки укладки. В настоящее время на элементах, которые вы пытаетесь уложить, есть разные атрибуты позиции. Самый простой способ складывать элементы друг над другом - использовать свойства display: block; и float: left;. Таким образом, элементы будут охватывать ширину их контейнера и появляться в том порядке, в котором они находятся внутри HTML документа.

Давайте посмотрим на то, как вы могли бы идти о том, что:

@media (max-width: 480px) { 
    .footer-message { 
     float: left; 
     display: block; 
    } 
    // center the links inside footer-message 
    .footer-message a { 
     text-align: center; 
     width: 100%; 
    } 
    .creation { 
     margin: 0 auto; // center it 
     display: block; 
    } 
    .back-to-top { 
     position: relative; // absolute positioning removes the element from document flow so we want to go relative 
     display: block; 
     margin: 0 auto; // center it 
    } 
} 

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

Надеюсь, что это поможет!

UPDATE: Я только заметил часть о том, что вы хотите центрировать элементы, я добавил код выше, чтобы сделать это.