CMS Development

johntan
Participant

How to align copy along logo

Résolue

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 Votes
1 Solution acceptée
tjoyce
Solution
Expert reconnu | Partenaire solutions Elite
Expert reconnu | Partenaire solutions Elite

How to align copy along logo

Résolue

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

Voir la solution dans l'envoi d'origine

0 Votes
6 Réponses
tjoyce
Expert reconnu | Partenaire solutions Elite
Expert reconnu | Partenaire solutions Elite

How to align copy along logo

Résolue

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 Votes
johntan
Participant

How to align copy along logo

Résolue

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
Expert reconnu | Partenaire solutions Elite
Expert reconnu | Partenaire solutions Elite

How to align copy along logo

Résolue

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 Votes
johntan
Participant

How to align copy along logo

Résolue

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
Solution
Expert reconnu | Partenaire solutions Elite
Expert reconnu | Partenaire solutions Elite

How to align copy along logo

Résolue

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 Votes
johntan
Participant

How to align copy along logo

Résolue

Tim, thank you for your contribution! Looks great!