Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi, how do I centre align the Call to Action button on my page (Home page)? I see only the Left and Right options. Thanks.
Hi Chandran V
Please add the following to your custom CSS
.home .sow-cta-wrapper .so-widget-sow-button { margin: 0 auto; float: none; }This will only affect the CTA button on the home page.
Let us know how you get on
Magus
Hi Magus, I am afraid the css did not work.
Hi Chandran V
Please try changing the above to
.home .sow-cta-wrapper .so-widget-sow-button { margin: 0 auto; float: none !important; }Magus
Worked like magic, Magus. Thank you very much.
Hi Magus, the above CSS for the widget is not working anymore. Please also help me with aligning the button in my footer to the centre, Thanks.
I would like to change the font also. Thanks.
Hi Chandran V
Please change the original CSS to the following
.home .sow-cta-wrapper .so-widget-sow-button { margin: 0 auto !important; float: none !important; display: table; }to change the button font please add the following
.home .sow-cta-wrapper .so-widget-sow-button a { font-family: "Merriweather" !important; }Please change the font type to your desired font.
Magus
Many thanks, Magus. Works beautifully.
Hi Magus, just a little issue with the widget. The text in the button (in the footer) breaks up into 3 lines when viewed in my iPhone 6 and they don’t appear to be centered. What’s going on? Please help. Thanks.
Reducing the footer padding on mobile will provide the button with a bit more space. Something like:
/* Footer */ @media (max-width: 680px) { #colophon { padding: 5px; } ]Thanks, Andrew. I tried your CSS but I see no change. To clarify; I would like to reduce the padding between the 3 lines below the call to action widget button. Thanks.
And I am getting errors because of the “]”.
Sorry, yes that should be a closing bracket.
/* Footer */ @media (max-width: 680px) { #colophon { padding: 5px; } }My understanding of the question was the your button was going to three lines on mobile. So I’m suggesting we start with removing some of the footer padding on mobile to provide more space for the button.
My apologies, Andrew. I have 2 questions in my original post on the matter. One was the text line “SIGN UP…” was breaking up into 2 lines and they don’t appear to be centered. Maybe I should do away with the icon. The second question is; the 3 lines below the button have too much padding when viewed in my iPhone 6.
Sure. Please try my CSS solution for the first problem. The button text splits into lines because of a lack of space. Reducing footer padding is one we can try resolve.
The problem with spacing on mobile is you’re using empty columns, those stack on mobile. Rather use one column and center the text using the Visual Editor widget.
My CSS should make the button split into two lines. One line will be tough considering the space we have to work with.
Yes Andrew. I have 2 lines in the button now. The css works. Thank you. Is the an option not to have an icon in the button? Not sure if removing the icon will help center both text nicely.
Sure. If you edit the widget and click on the icon in the widget settings it will deselect.
Thanks, Andrew. Appreciate the help.
For sure :)
Very useful, thanks!
For sure :) Glad that helped.