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 10 years, 8 months ago

    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 10 years, 8 months ago

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

  3. Magus Staff 10 years, 8 months ago

    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 10 years, 8 months ago

    Worked like magic, Magus. Thank you very much.

  5. Chandran V 10 years, 7 months ago

    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 10 years, 7 months ago

    I would like to change the font also. Thanks.

  7. Magus Staff 10 years, 7 months ago

    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 10 years, 7 months ago

    Many thanks, Magus. Works beautifully.

  9. Chandran V 10 years, 7 months ago

    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 10 years, 7 months ago

    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 10 years, 7 months ago

    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 10 years, 7 months ago

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

  13. Andrew Misplon Staff 10 years, 7 months ago

    Sorry, yes that should be a closing bracket.

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

    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 10 years, 7 months ago

    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 10 years, 7 months ago

    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 10 years, 7 months ago

    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 10 years, 7 months ago

    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 10 years, 7 months ago

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

  20. Chandran V 10 years, 7 months ago

    Thanks, Andrew. Appreciate the help.

  21. Andrew Misplon Staff 10 years, 7 months ago

    For sure :)

  22. platschi 10 years, 6 months ago

    Very useful, thanks!

    • Andrew Misplon Staff 10 years, 6 months ago

      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