This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Replies

23
  1. Magus Staff

    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. Chandran V

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

  3. Magus Staff

    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. Chandran V

    Worked like magic, Magus. Thank you very much.

  5. 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. Chandran V

    I would like to change the font also. Thanks.

  7. Magus Staff

    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. Chandran V

    Many thanks, Magus. Works beautifully.

  9. 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. Andrew Misplon Staff

    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. 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. Chandran V

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

  13. Andrew Misplon Staff

    Sorry, yes that should be a closing bracket.

    /* Footer */
@media (max-width: 680px) {
	#colophon {
		padding: 5px;
	}
}
  14. Andrew Misplon Staff

    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. 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. Andrew Misplon Staff

    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. Andrew Misplon Staff

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

  18. 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. Andrew Misplon Staff

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

  20. Chandran V

    Thanks, Andrew. Appreciate the help.

  21. Andrew Misplon Staff

    For sure :)

  22. platschi

    Very useful, thanks!

    • Andrew Misplon Staff

      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.

Have a different question or issue?

Start New Thread