0

I'm currently trying to keep the contents of my footer element inside and centered. However, they're not staying inside. I also want this to be mobile-responsive so they stay inside the footer regardless of the footer size.

Also, is there a better way I can implement a mobile-responsive footer that will always be under the content in the middle?

Here is my current code:

/* Footer Styling */

footer{
    width:100vw;
    height: 5%;
    background-color:#FFF6E3;
    position:absolute;
    bottom:0;
    text-align:center;

}

footer h3 {
    margin-top: 2%;
    font-family: Helvetica;
    font-style: normal;
    font-weight: bold;
    font-size: 31px;
    line-height: 36px;
    color: #BB7720;
}

footer p, a {
    font-family: Baskerville;
    font-style: italic;
    font-weight: normal;
    font-size: 31px;
    text-align: right;
    letter-spacing: 0.07em;
    text-align:center;
    color: #946E29;
}
<footer>
    <h3>CONNECT WITH BUN BUN</h3>
    <p>Contact us at <a href="#">bunbun@gmail.com</a></p>
</footer>
turtlefish12
  • 241
  • 3
  • 12

2 Answers2

0

In order to create a mobile responsive footer you are going to have to add in a media query. To add a media query you will need to decide the browser window width in which you want to add changes to your CSS (known as a breakpoint) and the html elements that you want to add changes to after that point. The following code will help you help your text elements from floating outside of the footer container as the screen becomes smaller.

@media only screen and (max-width: 600px) {
  footer h3 {
    margin-top: 20px;
  }
}
paul-schultz
  • 326
  • 1
  • 8
0

I think word-break: break-word; is what you're looking for.

Try adding this in your css

footer h3, footer p, footer a {
  word-break: break-word;
}

Also here is another way to do your footer. It is not required to use position: absolute; to make your footer stay at the bottom. But this depends on the way you have done your other elements. 

footer {
  background-color: #FFF6E3;
  text-align: center;
  padding: 2rem;
}

footer h3 {
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  line-height: 2.25rem;
  color: #BB7720;
  padding-bottom: 1rem;
}

footer p, footer a {
  font-family: 'Baskerville', sans-serif;
  font-style: italic;
  letter-spacing: 0.1rem;
  color: #946E29;
}

footer h3, footer p, footer a {
  font-size: 2rem;
  word-break: break-word;
  margin: 0;
}
<footer>
  <h3>CONNECT WITH BUN BUN</h3>
  <p>Contact us at <a href="#">bunbun@gmail.com</a></p>
</footer>

Note: Also consider using @media queries. Espicially to the font size on smaller screens.

Becky
  • 5,467
  • 9
  • 40
  • 73
  • Some links about media queries, for reference: https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ https://css-tricks.com/css-media-queries/ https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp – corn on the cob Oct 05 '20 at 07:06