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.
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; } }/* Home */ .home .ow-button-hover { min-width: 200px; }Adjust as required.
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).
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.
Here we go :)
/* Page Titles */ #page-title, article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title { line-height: normal; }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?
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; }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.
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?
Sure :) Give the following and try and see how that goes:
/* SiteOrigin Button */ .ow-button-base a { padding: 1em 2em !important; }Hem, no changes. Do I have to adjust somehow?
Yes, those are default values. Try adjust. Thanks.
Ok, I got the result I was looking for. Thanks a lot
Awesome :) Glad to hear it.
Cheers for now!