CMS Development

johntan
Teilnehmer/-in

How to align copy along logo

lösung

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 Upvotes
1 Akzeptierte Lösung
tjoyce
Lösung
Trendsetter/-in | Elite Partner
Trendsetter/-in | Elite Partner

How to align copy along logo

lösung

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

Lösung in ursprünglichem Beitrag anzeigen

0 Upvotes
6 Antworten
tjoyce
Trendsetter/-in | Elite Partner
Trendsetter/-in | Elite Partner

How to align copy along logo

lösung

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 Upvotes
johntan
Teilnehmer/-in

How to align copy along logo

lösung

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
Trendsetter/-in | Elite Partner
Trendsetter/-in | Elite Partner

How to align copy along logo

lösung

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 Upvotes
johntan
Teilnehmer/-in

How to align copy along logo

lösung

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
Lösung
Trendsetter/-in | Elite Partner
Trendsetter/-in | Elite Partner

How to align copy along logo

lösung

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 Upvotes
johntan
Teilnehmer/-in

How to align copy along logo

lösung

Tim, thank you for your contribution! Looks great!