Issue
I'm creating a footer, and I would like to align the images of social networks vertically and automatically. As it has an increase in the size of the source of the contacts, the images are up. And I do not know how to proceed.
My code on jsfiddle: Demo Code
HTML
<!DOCTYPE html>
<title>Teste</title>
<body>
<footer class="footer">
<div class="content">
<div class="footer-right">
<p><b>(43)3333-3333</b></p>
<p>contact@contact.com</p>
</div>
<div class="footer-left">
<ul>
<li>
<a href="#"><img src="http://imgur.com/RVvPQt9.png" alt="Twitter"></a>
</li>
<li>
<a href="#"><img src="http://imgur.com/LsqUBIh.png" alt="Facebook"></a>
</li>
<li>
<a href="#"><img src="http://imgur.com/8PhKmDe.png" alt="Instagram"></a>
</li>
<li>
<a href="#"><img src="http://imgur.com/hDSPEMm.png" alt="Linkedin"></a>
</li>
</ul>
</div>
</div>
</footer>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Sans Pro', sans-serif;
}
.content {
margin: 0 auto;
max-width: 1100px;
padding: 0 4% 0 4%;
}
li {
list-style: none;
}
.footer {
background-color: rgba(158, 158, 158, 0.42);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
padding: 15px 0;
overflow: hidden;
}
.footer .footer-right {
float: right;
}
.footer .footer-right {
font-size: 18px;
text-align: right;
}
.footer .content .footer-left {
float: left;
}
.footer .content .footer-left > ul > li {
display: inline-block;
}
.footer > .content > .footer-left > ul > li > a {
display: block;
}
.footer > .content > .footer-left > ul > li > a > img {
height: 30px;
width: 30px;
}
/*MEDIA QUERIES*/
@media screen and (max-width: 400px) {
.footer > .content > .footer-right,
.footer-left {
float: none !important;
text-align: center;
}
.footer > .content > .footer-right {
margin-bottom: 10px;
}
}
Solution
Use table display css - the table-cell causes the floating to work and the table-header-group and table-footer-group cause the reordering.
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Sans Pro', sans-serif;
}
.content {
margin: 0 auto;
max-width: 1100px;
padding: 0 4% 0 4%;
min-width:92%;
display:table;
}
li {
list-style: none;
}
.footer {
background-color: rgba(158, 158, 158, 0.42);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
padding: 15px 0;
overflow: hidden;
}
.footer .footer-right {
display:table-cell;
width:50%;
}
.footer .footer-right {
font-size: 18px;
text-align: right;
width:50%;
}
.footer .content .footer-left {
display:table-cell;
vertical-align:middle;
}
.footer .content .footer-left > ul > li {
display: inline-block;
}
.footer > .content > .footer-left > ul > li > a {
display: block;
}
.footer > .content > .footer-left > ul > li > a > img {
height: 30px;
width: 30px;
}
/*MEDIA QUERIES*/
@media screen and (max-width: 400px) {
.footer > .content > .footer-left {
display:table-footer-group;
width:100%;
float:none;
text-align: center;
}
.footer > .content > .footer-right {
display:table-header-group;
margin-bottom: 10px;
float:none;
width:100%;
}
.footer > .content > .footer-right p {
width:100%;
display:block;
text-align: center;
}
}<!DOCTYPE html>
<title>Teste</title>
<body>
<footer class="footer">
<div class="content">
<div class="footer-left">
<ul>
<li>
<a href="#"><img src="http://imgur.com/RVvPQt9.png"
alt="Twitter"></a>
</li>
<li>
<a href="#"><img src="http://imgur.com/LsqUBIh.png"
alt="Facebook"></a>
</li>
<li>
<a href="#"><img src="http://imgur.com/8PhKmDe.png"
alt="Instagram"></a>
</li>
<li>
<a href="#"><img src="http://imgur.com/hDSPEMm.png"
alt="Linkedin"></a>
</li>
</ul>
</div>
<div class="footer-right">
<p><b>(43)3333-3333</b></p>
<p>contact@contact.coma</p>
<p><b>(43)3333-3333</b></p>
<p>contact@contact.coma</p>
</div>
</div>
</footer>
</body>Answered By - WEBjuju Answer Checked By - Robin (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.