Sydney FP:Contact widget problem with horizontal allignment when address is long

  1. Using the above widget, everyting is OK as long as the address spans over one line. As soon as the address spans over two lines (unfortunately, we have a long address), the the HOME icon is no longer horizontally alligned with the PHONE and EMAIL icons. I think its because the whole block is “bottom alligned” instead of “top alligned”. How can I change this behaviour?
  2. On the same note- is there a way that I can control how my address breaks into two lines?

Hi,

1. In order to fix this you will have to apply custom css code below:

.fp-contact {
    display: block;
    float: left;
}

You can apply the code with simple custom css plugin.

Result should look like this http://screencast.com/t/IrLi4pDemT

If you continue to have this issue please send us your page link so we can inspect this closer.

2. Unfortunately you cannot control text breaking.

Best Regards

Thanks, this solved the alignment problem!

You’re welcome,

Best Regards

Hi,

Maybe a bit late but I realized that the added CSS is causing an unpleasent side effect- the “Call us” bit (which is supposed to be right under the title “Get in touch” is no longer aligned correctly.
Any suggestion how Both long addresses and correct alignment with the title could be achieved)?

Hi,

Can you please send us your page link? In that way we will more easily prepare necessary code.

Best Regards

Access to the site is currently password protected. Could you send me your email address so I can send you the credentials through a private channel?

Hi,

email is dimi[@]diwebdeveloper.com

Best regards

Hi,

We have applied custom css code below:

.fp-contact {
    display: inline-block;
    vertical-align: top;
}

and everything is aligned correctly, but you should consider using custom css code below:

/*contact align fix from 768px and above*/
@media only screen and (min-width: 768px) {
    .fp-contact {
        display: inline-block;
        vertical-align: top;
    }
}
/*contact align one after another below 768px*/
.fp-contact {
    display: block;
    margin: 0 auto;
    margin-bottom: 40px;
}

because in this way contact items will be aligned one after another on small screens http://screencast.com/t/pDRDLOuxm and on resolutions above 768px they will be in one line.

If you decide to apply the code, don’t forget to flush caching plugin cache.

Best Regards

Thanks, looks good!