topic Re: How to align copy along logo in CMS Development

How to align copy along logo

johntan — Tue, 19 Jun 2018 19:06:36 GMT

Hello!

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

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

Re: How to align copy along logo

tjoyce — Tue, 19 Jun 2018 19:19:25 GMT

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

Re: How to align copy along logo

johntan — Fri, 22 Jun 2018 13:32:57 GMT

Hey Tim!

Thanks for the suggestion. I plugged in that piece of code but now both logo and copy are hugging each other

Re: How to align copy along logo

tjoyce — Fri, 22 Jun 2018 13:42:53 GMT

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

Re: How to align copy along logo

johntan — Fri, 22 Jun 2018 13:49:24 GMT

Here's a weblink with the smart rule:

http://webmail.lawline.com/contact.firstname-check-out-some-of-our-popular-courses?hs_preview=GCFPkZKv-5897008752&ecid=ACsprvsTZypaLjPzEy6pG-5YOANnS9P6RGIKV4ElVBPk7LghgZcTDjh_bB3OrbJXBm1pXShrh1vf&utm_campaign=New_Nurture_Free%20Trial&utm_source=hs_email&utm_medium=email&utm_content=2&_hsenc=p2ANqtz-_5S2Uk4Bijqqk_pGt9Y6bPPNtQ1W9KpgcEQzJHMRViyoNnQFTwqQe6YMlMBvBxOFKry9pk5Uw0S7uwhdK0stMPldPXfQ&_hsmi=2

thanks again for your help!

Re: How to align copy along logo

tjoyce — Fri, 22 Jun 2018 14:38:15 GMT

No problem!

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

<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

Re: How to align copy along logo

johntan — Fri, 22 Jun 2018 21:23:15 GMT

Tim, thank you for your contribution! Looks great!