How To Vertical Align Text In Module Position In Menu On Onepage Template - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

How To Vertical Align Text In Module Position In Menu On Onepage Template

PK

Peter KORTGE

Template 2 years ago

Hi:

Tried nearly everything but unable to vertically align the mobile phone number in site module position "top3".

Can you please assist ?

Also, when I search for Onepage under templates on your site and then click on [Preview] for it, it takes me to the Fusion template?

0
7 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #122507

Hi Peter,

user that you created for us do not have access to the Administrator section of this site :(

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #122508

About 2nd question, I see only two templates

op_2023.gif

Fusion is a new template, but it's not typical onepage

0
PK
Peter KORTGE
Accepted Answer
2 years ago #122570

Hi Paul:

The issue is that when you hover over the OnePage template and click on [Preview] it takes you to the "Fusion" template even though the browser URL reads https://demo.joomshaper.com/?template=onepage.

Screenshot below:-

PS: It would be good if you could upload an image within the ticket, without having to upload to a server and then link :-)

0
Pavel
Pavel
Accepted Answer
2 years ago #122534

Hi Peter.

If I may...

A few tips.

The tabular layout in 2023 is an anachronism.

Instead of this

<table style="border-collapse: collapse; width: 100%;" border="1">
    <tbody>
            <tr>
                <td style="width: 100%; vertical-align: middle;"><span style="color: #ffffff;"><i class="fa-duotone fa-phone"> </i>0434 951 231</span></td>
            </tr>
    </tbody>
</table>

use that

<div style="color: #ffffff;">
    <i class="fa-duotone fa-phone"></i> 0434 951 231
</div>

Or. Also, a good practice is to make a phone link

<a href="tel:+COUNTRY_CODE0434951231" rel="nofollow" style="color: #ffffff;">
    <i class="fa-duotone fa-phone"></i> 0434 951 231
</a>

And the issue of vertical alignment is solved through CSS

#sp-top3 .sp-column {
    height: 100%;
    display: flex;
    align-items: center;
}

0
PK
Peter KORTGE
Accepted Answer
2 years ago #122572

Hi Pavel:

Thanks … The custom.css code works :-)

However, when I enter:-

<a href="tel:0434951231" rel="nofollow" style="color: #ffffff;">
    <i class="fa-duotone fa-phone"></i> 0434 951 231
</a>

as code into the site module, it gives this on [Save]:-

<p><a style="color: #ffffff;" href="tel:0434951231" rel="nofollow"> 0434 951 231 </a></p>

i.e. It strips out both <a href="/></a> and <i class="fa-duotone fa-phone"></i>

0
Pavel
Pavel
Accepted Answer
2 years ago #122575

If you use TinyMCE turn it ON in Set 0 settings

If you use JCE turn it OFF

In both editors, you can configure that the P tag does not wrap the content by default

0
Pavel
Pavel
Accepted Answer
2 years ago #122610

P tag has margin-bottom by default from Bootstrap code.

If you want to align it for sure, you need to get rid of P tag.

0