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 Me gusta
1 Soluciones aceptada
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel 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

Ver la solución en mensaje original publicado

0 Me gusta
6 Respuestas 6
tjoyce
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel 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 Me gusta
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
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel 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 Me gusta
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
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel 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 Me gusta
johntan
Participante

How to align copy along logo

resolver

Tim, thank you for your contribution! Looks great!