Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Is there a way to lower the heading font size of my posts when on mobile?
I am interested in too.. Also how to dublicate the design to mobile version??
Hi Trevor
We’re unfortunately at a point where I must suggest getting the help of a developer or accepting how the template is now. Technically our theme support doesn’t include any customising as a service for that we recommend http://codeable.io/. We don’t mind sending out the odd snippet but we’re well beyond that now.
I haven’t tested this but it might go something like this:
/* Page Content Heading Tag Sizes - Mobile */ @media screen and (max-width: 760px) { .entry-content h1 { font-size: 20px; } .entry-content h2 { font-size: 18px; } .entry-content h3 { font-size: 16px; } .entry-content h4 { font-size: 15px; } .entry-content h5 { font-size: 14px; } .entry-content h6 { font-size: 13px; } }Hmm couldn’t seem to get that to work. Here is some code that changes the titles I am trying to target. Would this work to make the text smaller if I remove the hover function? if so what needs to be deleted? Thanks for all your help!
/* Titles */
@media screen and (max-width: 760px) {
article.post .entry-header h1.entry-title a:hover,
article.page .entry-header h1.entry-title a:hover {
font-size: 15px;
}
}
Yes, that would need to be setup differently, you wouldn’t want to target text size on hover. Try this:
/* Titles */ @media screen and (max-width: 760px) { article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title { font-size: 15px !important; } }Chris on using !important: http://css-tricks.com/when-using-important-is-the-right-choice/
Awesome! worked, thanks!
One last quick question, is there a way to apply this to the page titles as well?
You’ve got pages in that selector right now:
Oops meant to say category page titles
Is the selector you need there. Please check out our tutorial on using your browser’s developer tool to find these: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
How would I add this to the current code?
/* Titles */ @media screen and (max-width: 760px) { article.post .entry-header h1.entry-title, article.page .entry-header h1.entry-title, #page-title { font-size: 15px !important; } }Worked perfectly, thanks a ton!