CSS Responsive - Can't get the required alignment - html

Question

I am trying to get the following responsive footer with CSS. I can't seem to figure out how to do it, I am kind of stuck with the alignment and code. Can some guru please shed some lights? I greatly appreciate. I have tried to change , and I think I still don't really understand deeply the code. I can't seem to achieve what I want. Please help.
JSFiddle Link for the Code and CSS
body {
margin: 0!important;
padding: 15px;
background-color: #FFF;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #727f80;
}
.outer-table {
width: 100%;
max-width: 670px;
margin: 0 auto;
background-color: #FFF;
}
td {
padding: 0;
}
p {
margin: 0;
}
a {
color: #F1F1F1;
text-decoration: none;
}
/*--- Start Two Column Sections --*/
.two-column {
text-align: center;
font-size: 0;
padding: 5px 0 10px 0;
}
/*--- Start Two Column Image & Text Sections --*/
.two-column img {
/* width: 100%; */
max-width: 280px;
height: auto;
}
.two-column .text {
padding: 10px 0;
}
/*--- Start Footer Section --*/
.footer {
width: 100%;
background-color: #365F91;
margin: 0 auto;
color: #FFF;
}
.footer img {
max-width: 135px;
margin: 0 auto;
display: block;
padding: 4% 0 1% 0;
}
p.footer {
text-align: center;
color: #FFF!important;
line-height: 30px;
padding-bottom: 4%;
text-transform: uppercase;
}
/*--- Media Queries --*/
#media screen and (max-width: 400px) {
.two-column .column,
.three-column .column {
max-width: 100%!important;
}
.two-column img {
/* width: 100%!important; */
}
}
#media screen and (min-width: 401px) and (max-width: 400px) {
.two-column .column {
max-width: 50%!important;
}
}
#media screen and (max-width:768px) {
img.logo {
float: none !important;
margin-left: 0% !important;
max-width: 200px!important;
}
}
.two-column img {
/* width: 100% !important; */
height: auto !important;
}
img.img-responsive {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="wrapper">
<table class="outer-table">
<tr>
<td class="two-column">
<table width="100%">
<tr>
<td class="footer">
<img src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
<p class="text2">Email: fake#ema.il</p>
<p class="text2">Tel: [phone]</p>
<br>
<img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt="">
</td>
<td class="footer">
<p class="text">Email: fake#gmail.com</p>
<p class="text">Tel: [phone]</p>
<br>
<img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--End Wrapper-->

Answer 1

Did some restructuring for the table and css, should be good now. There are many much better ways to do this design apart from table. But I did it in table format only.
If possible you can ditch table for this design and simply use flex or basic css with div's.....
body {
Margin: 0!important;
padding: 15px;
background-color: #FFF;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: white;
}
.outer-table {
width: 100%;
max-width: 670px;
margin: 0 auto;
background-color: #FFF;
background-color: #365F91;
padding: 2%;
}
/*--- Start Two Column Sections --*/
.two-column {
text-align: center;
font-size: 0;
padding: 5px 0 10px 0;
}
/*--- Start Two Column Image & Text Sections --*/
/* .two-column img {
width: 100%;
max-width: 280px;
height: auto;
}
.two-column .text {
padding: 10px 0;
} */
.section {
width: 50%;
text-align: center;
}
.m1{
margin: 1%;
}
.p1{
padding: 1%;
}
.contact-details{
text-align: left;
}
.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
/*--- Start Footer Section --*/
/* footer {
width: 100%;
background-color: #365F91;
Margin: 0 auto;
color: #FFF;
}
.footer img {
max-width: 135px;
Margin: 0 auto;
display: block;
padding: 4% 0 1% 0;
}
p.footer {
text-align: center;
color: #FFF!important;
line-height: 30px;
padding-bottom: 4%;
text-transform: uppercase;
} */
/*--- Media Queries --*/
#media screen and (max-width: 400px) {
.two-column .column, .three-column .column {
max-width: 100%!important;
}
.two-column img {
/* width: 100%!important; */
}
.three-column img {
max-width: 60%!important;
}
}
#media screen and (min-width: 401px) and (max-width: 400px) {
.two-column .column {
max-width: 50%!important;
}
.three-column .column {
max-width: 33%!important;
}
}
#media screen and (max-width:768px) {
img.logo {
float:none !important;
margin-left:0% !important;
max-width: 200px!important;
}
.two-column .section {
width: 100% !important;
max-width: 100% !important;
display: inline-block;
vertical-align: top;
}
.two-column img {
/* width: 100% !important; */
height: auto !important;
}
img.img-responsive {
width:100% !important;
height:auto !important;
max-width:100% !important;
}
.content {
width: 100%;
padding-top:0px !important;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<div class="wrapper-inner2">
<table class="outer-table">
<tbody>
<tr>
<td class="section">
<img width="60%" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
</td>
<td class="section">
<div class="contact-details">
<p style="margin-bottom: 0">Email: hansheung#gmail.com</p>
<p style="margin-top: 0">Tel: [phone]</p>
</div>
</td>
</tr>
<tr>
<td class="text-right p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></td>
<td class="text-left p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></td>
</tr>
</tbody>
</table>
</div>
<!--End of Wrapper Inner-->
</div>
<!--End Wrapper-->
</body>

Answer 2

no need to use the table for this design, you can use flex and can easily achieve it,
the best way to learn flex in a fun way is flexbox froggy
it's easy and powerful, try this and need something else on mobile so just make width 100% or everything in responsive points, the flex-wrap property will break it in a single column, or you can use flex-direction as well.
body {
Margin: 0!important;
padding: 15px;
background-color: #FFF;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
background: #053D66;
padding: 20px 30px;
}
img {max-width: 100%;}
p {
Margin:0;
}
a {
color: #F1F1F1;
text-decoration: none;
}
.d-flex {display: flex;}
.wrapper-inner2 {
flex-wrap: wrap;
}
..wrapper-inner2 >div {display: flex; justify-content: center;}
.image,.contact {width: 50%;}
.image img {
max-width: 75%;
margin: 0 auto;
}
.social {width: 100%; display: flex; justify-content: center; margin-top: 40px;}
.social > a {
display: inline-block;
margin-right: 20px;
}
.social > a:last-child {
margin-right: 0;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<div class="wrapper-inner2 d-flex">
<div class="image">
<img src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
</div>
<div class="contact">
<p class="text2">Email: hansheung#gmail.com</p>
<p class="text2">Tel: [phone]</p>
</div>
<div class="social"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></div>
</div><!--End of Wrapper Inner-->
</div><!--End Wrapper-->
</body>

Answer 3

Here's the solution you can make into two divs.
You can modify according to your style content
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.img{
max-width:100%;height:auto;}
.column {
float: left;
width: 50%;
padding: 5px;
}
.socialicons{
float: left;
width: 100%;
padding: 5px;
text-align: center;
}
.row{
background: #365F91;}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="Snow" style="width:100%">
</div>
<div class="column">
<p>Email: hansheung#gmail.com</p>
<p>Tel: [phone]</p>
</div>
<div class="socialicons">
<img src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" >
<img src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" >
</div>
</div>
</body>
</html>

Answer 4

This can be accomplished much easier by taking advantage of display:flex. Here's some helpful documentation.
You can wrap divs around the two rows, and give that div the property "display: flex".