CMS Development

johntan
Participante

How to align copy along logo

resolver

Hello!

 

Having some difficulting aligning the logo to be on the same level as the copy where it's almost hugging the horizontal line. 

Screen Shot 2018-06-19 at 2.54.42 PM.png

 Here's the HTML code:

div style="text-align: left;"><a href="https://www.lawline.com"><img src="http://lp.lawline.com/hubfs/Lawline%20400px%20wide_v2.png?noresize" alt="" title="Lawline 400px wide_v2.png" width="137" style="width: 137px;"></a>
<div style="text-align: right;">Free trial expires</div>
</div

0 Avaliação positiva
1 Solução aceita
tjoyce
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

How to align copy along logo

resolver

No problem!

I added 2 new inline styles to get it to lineup the correct way. I underlined them in the following screenshot.

io.png

 

<div style="text-align: left;float:left;width:100%;clear:both;">
    <a href="https://www.lawline.com">
        <img src="http://lp.lawline.com/hubfs/Lawline%20400px%20wide_v2.png?noresize" alt="" title="Lawline 400px wide_v2.png" width="137" style="width: 137px;">
    </a>
    <div style="text-align: right;float:right;margin-top:17px;">Free trial expires</div>
</div>

 


tim@belch.io

Exibir solução no post original

0 Avaliação positiva
6 Respostas 6
tjoyce
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

How to align copy along logo

resolver

It's difficult to give you exact code without actually playing with the page but, you could try floating the logo to the left and the text to the right:

<div style="text-align: left;float:left;">
    <a href="https://www.lawline.com">
        <img src="http://lp.lawline.com/hubfs/Lawline%20400px%20wide_v2.png?noresize" alt="" title="Lawline 400px wide_v2.png" width="137" style="width: 137px;">
    </a>
    <div style="text-align: right;float:right;">Free trial expires</div>
</div>

tim@belch.io
0 Avaliação positiva
johntan
Participante

How to align copy along logo

resolver

Hey Tim!

 

Thanks for the suggestion. I plugged in that piece of code but now both logo and copy are hugging each otherScreen Shot 2018-06-22 at 9.30.23 AM.png

tjoyce
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

How to align copy along logo

resolver

Good, we are making progress then 😄 I can give you very specific code if you have a preview link I can check out!


tim@belch.io

0 Avaliação positiva
johntan
Participante

How to align copy along logo

resolver

Here's a weblink with the smart rule:

 

http://webmail.lawline.com/contact.firstname-check-out-some-of-our-popular-courses?hs_preview=GCFPkZ...

 

thanks again for your help!

tjoyce
Solução
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

How to align copy along logo

resolver

No problem!

I added 2 new inline styles to get it to lineup the correct way. I underlined them in the following screenshot.

io.png

 

<div style="text-align: left;float:left;width:100%;clear:both;">
    <a href="https://www.lawline.com">
        <img src="http://lp.lawline.com/hubfs/Lawline%20400px%20wide_v2.png?noresize" alt="" title="Lawline 400px wide_v2.png" width="137" style="width: 137px;">
    </a>
    <div style="text-align: right;float:right;margin-top:17px;">Free trial expires</div>
</div>

 


tim@belch.io

0 Avaliação positiva
johntan
Participante

How to align copy along logo

resolver

Tim, thank you for your contribution! Looks great!