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.

Page title line height & button widget padding

Resolved 14 replies premiumthemetheme-vantage
phil_traveler
10 years ago · Last reply by Andrew Misplon 10 years ago

Hi,
Page titles display badly because line height is too small when seen on small screens (see image from mobile). How can I fix that and make sure line height is automatically adjusted?
http://thebutterflyhunter.net/?attachment_id=651

Is it possible to adjust only right an left padding of a button? I want it to be all the same.

Home

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

14
  1. Andrew Misplon Staff 10 years, 4 months ago

    Hi Phil_traveler

    You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    /* Logo */
@media (max-width: 680px) {
	body.responsive #masthead.masthead-logo-in-menu .logo {
	    padding: 20px 0;
	}
}
  2. Andrew Misplon Staff 10 years, 4 months ago 
    /* Home */
.home .ow-button-hover {
min-width: 200px;
}

    Adjust as required.

  3. phil_traveler 10 years, 4 months ago

    Sorry, I’m a bit confused. Why this code about logo? I tried the code for the button but see no effect for the site origins buttons (widget).

  4. Andrew Misplon Staff 10 years, 4 months ago

    Ahh sorry, I missed the point of the screenshot. Ignore the first Custom CSS rule.

    With regards to your home page buttons. We can make them the same width using min-width. Right now in Custom CSS you’re saying:

    .home .ow-button-hover {
    min-width: 30px;
}

    That’s not enough to help. Try testing at say 300px for example. It’ll make the buttons too large but you’ll see they are all the same size.

  5. Andrew Misplon Staff 10 years, 4 months ago

    Here we go :)

    /* Page Titles */
#page-title, article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title {
    line-height: normal;
}
  6. phil_traveler 10 years, 4 months ago

    I realize my question was not clear for the button. I don’t want to make all of them look the same, I want to make the padding around each of them look the same (therefore left and right smaller than they look now).
    Concerning the height of the title line what is the solution?

  7. Andrew Misplon Staff 10 years, 4 months ago

    Here is the page title fix:

    /* Page Titles */
#page-title, article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title {
    line-height: normal;
}
  8. Andrew Misplon Staff 10 years, 4 months ago

    For the buttons, edit each widget and click Design and Layout, there you can reduce the padding. You can choose between Low, Medium, High, Very High.

  9. phil_traveler 10 years, 4 months ago

    Ok, titles fixed, thanks!
    For the button, I saw the option low-medium etc, but still right and left are bigger than top and bottom. Possible to customize it?

  10. Andrew Misplon Staff 10 years, 4 months ago

    Sure :) Give the following and try and see how that goes:

    /* SiteOrigin Button */
.ow-button-base a {
    padding: 1em 2em !important;
}
  11. phil_traveler 10 years, 4 months ago

    Hem, no changes. Do I have to adjust somehow?

  12. Andrew Misplon Staff 10 years, 4 months ago

    Yes, those are default values. Try adjust. Thanks.

  13. phil_traveler 10 years, 4 months ago

    Ok, I got the result I was looking for. Thanks a lot

  14. Andrew Misplon Staff 10 years, 4 months ago

    Awesome :) Glad to hear it.

    Cheers for now!

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