Как мне исправить мой нижний колонтитул в мобильном представлении? Нижний колонтитул переходит на всю страницу в мобильном представлении - PullRequest
Новая
       17

Как мне исправить мой нижний колонтитул в мобильном представлении? Нижний колонтитул переходит на всю страницу в мобильном представлении

1 голос
/ 22 мая 2019

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

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

<section id="Kalendar">
<div id="calendar-wrap">

            <h1 id="calendarhead">Kalendar - Juli 2019</h1>

        <div id="calendar">
            <ul class="weekdays">
                <li>Sonntag</li>
                <li>Montag</li>
                <li>Dienstag</li>
                <li>Mittwoch</li>
                <li>Donnerstag</li>
                <li>Freitag</li>
                <li>Samstag</li>
            </ul>

            <!-- Days from previous month -->

            <ul class="days">
                <li class="day other-month">
                    <div class="date">27</div>                      
                </li>
                <li class="day other-month">
                    <div class="date">28</div>

                </li>
                <li class="day other-month">
                    <div class="date">29</div>                      
                </li>
                <li class="day other-month">
                    <div class="date">30</div>                      
                </li>
                <li class="day other-month">
                    <div class="date">31</div>                      
                </li>

                <!-- Days in current month -->

                <li class="day">
                    <div class="date">1</div> 
                    <div class="event">
                        <div class="event-desc">
                            Hip-Hop-Dance Workshop
                        </div>
                        <div class="event-time">
                            11:00-15:30 Uhr
                        </div>
                            <div class="event-desc">
                            Openair-Kino 
                        </div>
                        <div class="event-time">
                            20:00 Uhr
                        </div>
                    </div>

                </li>
                <li class="day">
                    <div class="date">2</div>
                    <div class="event">
                        <div class="event-desc">
                            Hip-Hop-Dance Workshop
                        </div>
                        <div class="event-time">
                            11:00-15:30 Uhr
                        </div>
                    </div>                      
                </li>
            </ul>

                <!-- Row #2 -->

            <ul class="days">
                <li class="day">
                    <div class="date">3</div>
                    <div class="event">
                        <div class="event-desc">
                            Hip-Hop-Dance Workshop
                        </div>
                        <div class="event-time">
                            11:00-15:30 Uhr
                        </div>
                        <div class="event-desc">
                            Dance Battle Hip Hop Streetdance 
                        </div>
                        <div class="event-time">
                            16:00 Uhr
                        </div>
                    </div>   
                </li>
                <li class="day">
                    <div class="date">4</div>                       
                </li>
                <li class="day">
                    <div class="date">5</div>                       
                </li>
                <li class="day">
                    <div class="date">6</div>                       
                </li>
                <li class="day">
                    <div class="date">7</div>                       
                </li>
                <li class="day">
                    <div class="date">8</div>
                    <div class="event">
                        <div class="event-desc">
                            Liedtexte Schmiede
                        </div>
                        <div class="event-time">
                            11:30-17:00 Uhr 
                        </div>
                            <div class="event-desc">
                            Openair-Kino
                        </div>
                        <div class="event-time">
                            20:00 Uhr 
                        </div>
                    </div>   
                </li>
                <li class="day">
                    <div class="date">9</div>
                        <div class="event">
                        <div class="event-desc">
                            Liedtexte Schmiede
                        </div>
                        <div class="event-time">
                            11:30-17:00 Uhr 
                        </div>
                    </div> 

                </li>
            </ul>

                <!-- Row #3 -->

            <ul class="days">
                <li class="day">
                    <div class="date">10</div>                      
                </li>
                <li class="day">
                    <div class="date">11</div>                      
                </li>
                <li class="day">
                    <div class="date">12</div>
                    <div class="event">
                        <div class="event-desc">
                            Fotografie-Ausstellungen "Bilder, die bleiben" 
                        </div>
                        <div class="event-desc">
                            Konzert Fräulein Tysz & Band 
                        </div>
                        <div class="event-time">
                            20:00 Uhr 
                        </div>
                    </div>   
                </li>
                <li class="day">
                    <div class="date">13</div>
                        <div class="event">
                        <div class="event-desc">
                            Fotografie-Ausstellungen "Bilder, die bleiben" 
                        </div>
                    </div>
                </li>
                <li class="day">
                    <div class="date">14</div>
                    <div class="event">
                        <div class="event-desc">
                            Fotografie-Ausstellungen "Bilder, die bleiben"
                        </div>
                    </div>                      
                </li>
                <li class="day">
                    <div class="date">15</div>  
                    <div class="event">
                        <div class="event-desc">
                            Kompaktkurs: Videodreh und Schnitt
                        </div>
                        <div class="event-time">
                            11:00-15:00 Uhr
                        </div>
                        <div class="event-desc">
                            Openair-Kino
                        </div>
                        <div class="event-time">
                            20:00 Uhr 
                        </div>
                        <div class="event-desc">
                            Fotografie-Ausstellungen "Bilder, die bleiben"
                        </div>
                    </div>   
                </li>
                <li class="day">
                    <div class="date">16</div> 
                        <div class="event">
                        <div class="event-desc">
                            Fotografie-Ausstellungen "Bilder, die bleiben"
                        </div>
                    </div>
                </li>
            </ul>

                <!-- Row #4 -->

            <ul class="days">
                <li class="day">
                    <div class="date">17</div>
                    <div class="event">
                        <div class="event-desc">
                            Kompaktkurs: Videodreh und Schnitt
                        </div>
                        <div class="event-time">
                            11:00-15:00 Uhr
                        </div>
                        <div class="event-desc">
                            Ausflug zum Barfußpark Egestorf
                        </div>
                        <div class="event-time">
                            10-18 Uhr
                        </div>
                        <div class="event-desc">
                            Fotografie-Ausstellungen "Bilder, die bleiben"
                        </div>
                    </div>   
                </li>
                <li class="day">
                    <div class="date">18</div>  
                        <div class="event">
                        <div class="event-desc">
                            Kompaktkurs: Videodreh und Schnitt
                        </div>
                        <div class="event-time">
                            11:00-15:00 Uhr
                        </div>
                        <div class="event-desc">
                            Fotografie-Ausstellungen "Bilder, die bleiben"
                        </div>
                    </div>  
                </li>
                <li class="day">
                    <div class="date">19</div>
                    <div class="event">
                        <div class="event-desc">
                            Konzert Monoclub 
                        </div>
                        <div class="event-time">
                            20:00 Uhr
                        </div>
                        <div class="event-desc">
                            Fotografie-Ausstellungen "Bilder, die bleiben"
                        </div>
                    </div>   
                </li>
                <li class="day">
                    <div class="date">20</div>
                    <div class="event">
                        <div class="event-desc">
                            Fotografie-Ausstellungen "Bilder, die bleiben"
                        </div>
                    </div>  
                </li>
                <li class="day">
                    <div class="date">21</div> 
                    <div class="event">
                        <div class="event-desc">
                            Fotografie-Ausstellungen "Bilder, die bleiben"
                        </div>
                    </div>  
                </li>
                <li class="day">
                    <div class="date">22</div>
                    <div class="event">
                        <div class="event-desc">
                            Kompaktkurs: Videodreh und Schnitt
                        </div>
                        <div class="event-time">
                            11:00-15:00 Uhr
                        </div>
                        <div class="event-desc">
                            Openair-Kino
                        </div>
                        <div class="event-time">
                            20:00 Uhr 
                        </div>
                    </div>                      
                </li>
                <li class="day">
                    <div class="date">23</div>                      
                </li>
            </ul>

                    <!-- Row #5 -->

            <ul class="days">
                <li class="day">
                    <div class="date">24</div>                      
                </li>
                <li class="day">
                    <div class="date">25</div>
                    <div class="event">
                        <div class="event-desc">
                            Kompaktkurs: Videodreh und Schnitt
                        </div>
                        <div class="event-time">
                            11:00-15:00 Uhr
                        </div>
                    </div>                      
                </li>
                <li class="day">
                    <div class="date">26</div>                      
                </li>
                <li class="day">
                    <div class="date">27</div>                      
                </li>
                <li class="day">
                    <div class="date">28</div>                      
                </li>
                <li class="day">
                    <div class="date">29</div>
                    <div class="event">
                        <div class="event-desc">
                            Openair-Kino
                        </div>
                        <div class="event-time">
                            20:00 Uhr 
                        </div>
                    </div>   
                </li>
                <li class="day">
                    <div class="date">30</div>                      
                </li>
            </ul>

            <!-- Row #6 -->

            <ul class="days">
                <li class="day">
                    <div class="date">31</div>                      
                </li>
                <li class="day other-month">
                    <div class="date">1</div> <!-- Next Month -->                       
                </li>
                <li class="day other-month">
                    <div class="date">2</div>                       
                </li>
                <li class="day other-month">
                    <div class="date">3</div>                       
                </li>
                <li class="day other-month">
                    <div class="date">4</div>                       
                </li>
                <li class="day other-month">
                    <div class="date">5</div>
                        <div class="event">
                        <div class="event-desc">
                            Openair-Kino
                        </div>
                        <div class="event-time">
                            20:00 Uhr 
                        </div>
                    </div> 
                </li>
                <li class="day other-month">
                    <div class="date">6</div>                       
                </li>
            </ul>

        </div><!-- /. calendar -->
    </div><!-- /. wrap -->
</section>
</main>
<footer class="footer-distributed">

        <div class="footer-left">

            <h3>Company<span>logo</span></h3>

            <p class="footer-links">
                <a class="footera" href="#">Home</a>
                ·
                <a class="footera" href="#">Blog</a>
                ·
                <a class="footera" href="#">Pricing</a>
                ·
                <a class="footera" href="#">About</a>
                ·
                <a class="footera" href="#">Faq</a>
                ·
                <a class="footera" href="#">Contact</a>
            </p>

            <p class="footer-company-name">Company Name &copy; 2015</p>
        </div>

        <div class="footer-center">

            <div>
                <i class="fa fa-map-marker"></i>
                <p><span>21 Revolution Street</span> Paris, France</p>
            </div>

            <div>
                <i class="fa fa-phone"></i>
                <p>+1 555 123456</p>
            </div>

            <div>
                <i class="fa fa-envelope"></i>
                <p><a href="mailto:support@company.com">support@company.com</a></p>
            </div>

        </div>

        <div class="footer-right">

            <p class="footer-company-about">
                <span>About the company</span>
                Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
            </p>

            <div class="footer-icons">

                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-linkedin"></i></a>
                <a href="#"><i class="fa fa-github"></i></a>

            </div>

        </div>

    </footer>

jsfiddle: https://jsfiddle.net/L0f42x8d/

1 Ответ

1 голос
/ 22 мая 2019

float: left на контейнере footer-distributed, чтобы он не занимал всю страницу 

.footer-distributed{
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 55px 50px;
    margin-top: 80px;
    float:left;
}
...