CODEWITHSUNDEEP
htmlcssresponsive
Hanz Cheah
Hanz Cheah

Reputation: 811

CSS Responsive - Can't get the required alignment

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.

Trying to achieve

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: [email protected]</p>
              <p class="text2">Tel: 00-0000000</p>
              <br>

              <a href="https://www.facebook.com/ttcinsurance"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></a>
            </td>
            <td class="footer">
              <p class="text">Email: [email protected]</p>
              <p class="text">Tel: 00-000000</p>
              <br>
              <a href="https://www.youtube.com/channel/UCG6CJHqgnZN7HbX5NWqEhXg"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

</div>
<!--End Wrapper-->

Upvotes: 2

Views: 169

Answers (4)

Abhisar Tripathi
Abhisar Tripathi

Reputation: 1659

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: [email protected]</p>
              <p style="margin-top: 0">Tel: 04-2294366</p>
            </div>
              
            </td>
          </tr>
          <tr>
            <td class="text-right p1"><a href="https://www.facebook.com/ttcinsurance"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></a></td>
            <td class="text-left p1"><a href="https://www.youtube.com/channel/UCG6CJHqgnZN7HbX5NWqEhXg"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></a></td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--End of Wrapper Inner-->
  </div>
  <!--End Wrapper-->




</body>

Layout

Upvotes: 3

Atul Rajput
Atul Rajput

Reputation: 4178

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"><a href="">Email: [email protected]</a></p>
            <p class="text2"><a href="">Tel: 04-2294366</a></p>
                                    
            </div>
<div class="social"><a href="https://www.facebook.com/ttcinsurance"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></a><a href="https://www.youtube.com/channel/UCG6CJHqgnZN7HbX5NWqEhXg"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></a></div>
            
        </div><!--End of Wrapper Inner-->
    </div><!--End Wrapper-->

    


</body>

Upvotes: 1

kirankumar
kirankumar

Reputation: 135

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: [email protected]</p>
    <p>Tel: 04-2294366</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>

Upvotes: 0

rguttersohn
rguttersohn

Reputation: 484

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".

Upvotes: -1

Related Questions