Crypdra
Reputation: 25
How do i fix my footer in mobile view? Footer goes into whole page in mobile view
My footer goes into the whole page in the mobile view. You can see it when you resize the site to mobile size at the calendar section where the single days are colored grey by the footer
I have tried playing with padding around in the media querys for the calendar and footer, changing heights and margins.. nothing worked so far
<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 © 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:[email protected]">[email protected]</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/
Upvotes: 1
Views: 52
Answers (1)
gael
Reputation: 1485
float: left on the footer-distributed container prevent it to cover the whole page
.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;
}
Upvotes: 1
Related Questions
- My footer is not responsive - how to make it responsive?
- Footer Is Not Responsive For Mobile Users
- Footer isn't showing fully in mobile view
- How do I create a responsive footer for mobiles
- My Footer on mobile gets cut off the page
- Responsive footer displayed over parts of content when shrinking browser
- Footer content not showing in mobile view
- Footer width on mobile phone
- Footer is not responsive
- CSS Responsive Desgn Footer taking whole space when screen size goes below 1180 px