Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Modal Popup

Featured Lock Resolved Issue
Hellooo,

I am using the modal popups and have an issue with the button icons not aligning correctly as shown in the image attached.
Basically they need a space before the text and the text ideally should be centered but I cannot seem to do any of it.
Is there something I am missing?
Many thanks

Attachments (1)

  • modal popup.png
    modal popup.png 259.7 KB

10 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Done.
----

a.sppb-magnific-popup.sppb-modal-selector span {
text-align: center;
margin: 0 auto;
}


and added <span> button name </span>

Attachments (1)

  • done.png
    done.png 110.9 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
Icon is correct pace - in the middle of left side. Buttons were designed for short action text.

In your case two simple tasks can help:
1) Small right margin for (i) icon
2) Reduction of font size text used in buttons.

Top

More than a month ago #Permalink
ok, I get you but why is the text for - experienced staff - electronic processing - fast turnaround - not aligned as the others . I have changed the css to -

.btn, .sppb-btn, .tp-caption .btn, .pager.pagenav a {
background-color: #27b4e4;
border: 2px solid #1e2770;
border-radius: 8px;
color: #fff;
font-size: 1em;
font-weight: 600;
padding: 13px 28px;
text-align: right;
transition: color 400ms ease 0s, background-color 400ms ease 0s, border-color 400ms ease 0s;
}

to test the alignments but it dosent align - experienced staff or fast turnaround - they remain as they were. Very confused :(
Any ideas ?
Thanks

Paul Frankowski - Staff

More than a month ago #Permalink
text-align: center
- is used probably for those buttons .
---
Without link we can talk ages....

Paul Frankowski - Staff

More than a month ago #Permalink
Try this:


a.sppb-modal-selector i {padding-right:5px;}

a.sppb-modal-selector.sppb-btn {
text-align: left;
padding: 5px 10px;
font-size:14px;
}


if font is too big/small just change value.

Top

More than a month ago #Permalink
Hi Paul,

Many thanks for that, but it kind of works.
The site is under development but I am happy to PM you the details so you can have a look at what I mean by 'kind of works'
Thanks again and let me know if you would like the details.

Paul Frankowski - Staff

More than a month ago #Permalink
sure, click to my avatar to get access to "Private Message" button

don't forget to send me URL of that Page where you have it.
---
BTW
My custom CSS helped a little bit ?
It was code based on my demo site.

Paul Frankowski - Staff

More than a month ago #Permalink
Remember about (screenshot)

Attachments (1)

  • span.png
    span.png 17.9 KB

Top

More than a month ago #Permalink
Brilliant! Thank you very much your support on this forum is the best around! :D


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 143
Toufiq

Toufiq

Total Accepted Answers: 51
Shibbir

Shibbir

Total Accepted Answers: 28
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 4
Pavel

Pavel

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam