Home>Support>Call to Action button alignment
  1. 9 years, 3 months ago Magus
    Hi, I Work Here

    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

  2. 9 years, 3 months ago Chandran V

    Hi Magus, I am afraid the css did not work.

  3. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Chandran V

    Please try changing the above to

    .home .sow-cta-wrapper .so-widget-sow-button {
    margin: 0 auto;
    float: none !important;
}

    Magus

  4. 9 years, 3 months ago Chandran V

    Worked like magic, Magus. Thank you very much.

  5. 9 years, 2 months ago Chandran V

    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.

  6. 9 years, 2 months ago Chandran V

    I would like to change the font also. Thanks.

  7. 9 years, 2 months ago Magus
    Hi, I Work Here

    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

  8. 9 years, 2 months ago Chandran V

    Many thanks, Magus. Works beautifully.

  9. 9 years, 2 months ago Chandran V

    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.

  10. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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;
	}

]
  11. 9 years, 2 months ago Chandran V

    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.

  12. 9 years, 2 months ago Chandran V

    And I am getting errors because of the “]”.

  13. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Sorry, yes that should be a closing bracket.

    /* Footer */

@media (max-width: 680px) {

	#colophon {
		padding: 5px;
	}

}
  14. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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.

  15. 9 years, 2 months ago Chandran V

    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.

  16. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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.

  17. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    My CSS should make the button split into two lines. One line will be tough considering the space we have to work with.

  18. 9 years, 2 months ago Chandran V

    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.

  19. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Sure. If you edit the widget and click on the icon in the widget settings it will deselect.

  20. 9 years, 2 months ago Chandran V

    Thanks, Andrew. Appreciate the help.

  21. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    For sure :)

  22. 9 years, 2 months ago platschi

    Very useful, thanks!

    • 9 years, 2 months ago Andrew Misplon
      Hi, I Work Here

      For sure :) Glad that helped.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More