CODEWITHSUNDEEP
htmlcsszurb-foundation
McDuck4
McDuck4

Reputation: 662

left align under 600 px

I am not quite sure why my logo on my Test site is left aligning when I go under 600px in screen width? I do not have any float left and I centered the picture with text-align: center also.

I am building an email newsletter template. Therefore I use the foundation css framework, and that means tables.

Can anybody see why my logo is left align below 600px?

HTML

<!-- Logo -->
          <table class="row background-color__white">
            <tr>
              <td class="center" align="center">
                <center>
                  <table class="container">
                    <tr>
                      <td class="wrapper last">
                        <table class="twelve columns">
                          <tr>
                            <td style="text-align: center;">
                              <a href="http://google.dk">
                                <img width="250" height="80" src="https://s24.postimg.org/y6ho747xx/Untitled_1.png" alt="Alt text here">
                              </a>
                            </td> 
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </center>
              </td>
            </tr>
          </table>

Upvotes: 0

Views: 338

Answers (2)

Keith
Keith

Reputation: 4147

Your table, tr, and td tags have display: table-row, they need to be turned into display: block. If you need them only for media queries, then stick this in there.

#test, #test table, #test td, #test tr, #test tbody {
  display: block;
}

Updated with a jsfiddle:

https://jsfiddle.net/cj09ecy2/

Upvotes: 1

gwally
gwally

Reputation: 3547

In Zurb, below 600 means that a media query is setting your cell to be align="left". That means either the href, td, tr or table places an align="left" on your table cell.

You can force the logo to align center by placing the same center style to each parent above the td.

<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%" class="twelve columns" style="text-align: center;">
  <tr style="text-align: center;">
    <td style="text-align: center;">
      <a href="http://google.dk">
        <img width="250" height="80" src="https://s24.postimg.org/y6ho747xx/Untitled_1.png" alt="Alt text here">
    </td>
  </tr>
</table>

You can also add a class like .center-align {text-align: center !important;} and add that to your class in the td as well as the media query for under 600.

Upvotes: 1

Related Questions