H3 inside table email marketing

Asked

Viewed 55 times

-2

Talk guys, I need to apply an H3 inside a table, on a td but at its bottom position. Because I have an image and I need to play a title for the image. I tried with the position application but it does not work in the email clients, can help me with a solution for this?

<td> 
     <img src='img/topo-oferta-aprovada-2.jpg' width='600' height='' alt='alt_text' border='0' align='center' style='width: 100%; max-width: 600px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 140%; color: #555555; margin: auto;'>
     <h3 valign='bottom' style='vertical-align: bottom; margin-left: 20px;color: #FFF;font-family: sans-serif;font-weight: bold;font-size: 20px; margin-top: -50px;'>Sua oferta foi aprovada</h3>
</td>

Thank you

inserir a descrição da imagem aqui

html css email

  • Cristiando the staff is negative you just put the image and did not put the html/css code. Please edit your question with the code that only the image does not help you much.

  • Thank you! Hugocsl

  • Tried to align on TD instead of H3?

  • No longer works

  • Dude I don’t have to do email testing here, but try to inspect the email and look which CSS the email system didn’t recognize. Looking at how the CSS arrived the time you can see what the email client disregarded from the CSS that was sent...

  • @hugocsl what he is disregarding position: relative

Show 1 more comment

1 answer

-1


Cristiano made some corrections in his CSS to align etc. If it does not work in your project it is because there is some other CSS interfering in your element, in which case you would have to put !importante in some styles

EDIT: Notice that it was necessary to put display:flex in <dt> now it may work since with the position didn’t work out...

See the example below.

<table>
    <tbody>
        <tr>
            <td style="display: flex; flex-direction: column;">
                <img src="http://placecage.com/600/200" width="600" height="" alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 140%; color: #555555; margin: auto;">
                <h3 valign="bottom" style="vertical-align: bottom; text-align: center; padding: 10px 0; color: #FFF; font-family: sans-serif; font-weight: bold; font-size: 20px; margin-top: -50px; background-color: rgba(0,0,0,0.5);">Sua oferta foi aprovada</h3>
            </td>
        </tr>
    </tbody>
</table>

  • I receive @hugocsl https://prnt.sc/javynjthis way

  • what it is disregarding position: relative

  • @Cristianofacirolli guy I edited my answer, tests with this code now. I had to use flex display on TD to not need to use position. Test if it worked and tell me

  • It worked @hugocsl , sorry for the delay in responding

  • @Cristianofacirolli glad it worked out! If my answer helped you in any way consider marking it as Accept, in this icon below the arrows on the left side of my answer :) so the site does not get open questions pending without response accepted.

  • Show, accept! =)

Show 1 more comment

Browser other questions tagged html css email

You are not signed in. Login or sign up in order to post.