RonaIdo RonaIdo - 2 months ago 10
CSS Question

Media Queries - Center Content

When my website is full size, I have content in the footer aligned to the left and right, as follows;

<div class="site-info">
<span class="left">© Client 2016</span>
<span class="right">Site by<a href="#"><img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px" align="right"></a></span>
</div>


Using this CSS;

.right {
float: none;
}

.left {
float: none;
}


When the website is displayed on a phone, I want the content in the span classes to be displayed in the middle of the screen, with the '© Client 2016' text being displayed on one line, and the text/image link being displayed on another line below it, both centered. Any help is appreciated, thanks

Answer

Here is one way, using flexbox

.site-info {
  background: lightgray;
  overflow: auto;
}
.right img {
  float: right;
}

@media screen and (max-width: 480px) {
  .site-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: lightgray;
  }
  .right {
    display: flex;
    align-items: center;
  }
  .right img {
    margin-left: 10px;
  }
}
<div class="site-info">
  <span class="left">© Client 2016</span>
  <span class="right">Site by <a href="#"><img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px"></a></span>
</div>

And if you can't/don't want flexbox, here is one without

.site-info {
  background: lightgray;
  overflow: auto;
}
.right a {
  float: right;
}

@media screen and (max-width: 480px) {
  .site-info > span {
    display: block;
    text-align: center;
  }
  .right * {
    vertical-align: middle;
  }
  .right a {
    float: none;
    margin-left: 10px;
  }
}
<div class="site-info">
  <span class="left">© Client 2016</span>
  <span class="right">Site by <a href="#"><img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px"></a></span>
</div>