Hi Ksully
For the title, add this to your stylesheet:
@media (max-width: 425px){
a.navbar-brand.text-logo {
text-transform: uppercase;
font-weight: bold;
font-size: 150%;
}
}
For the second part:
@media (min-width: 320px)
.frontpage-banner.image-banner.frontpage-banner .block-title {
font-size: 24px;
position: relative;
top: 1em;
}`
Basically, you will need to adjust these values using media queries so that the content fits just right. That is the least invasive way of doing it.
Hope this helps!
THANK YOU. I can’t tell you how much the site title was bothering me on mobile. Looks so much better now.
The second one didn’t quite work. If it matters, we don’t need that site banner text on any version of the site, it’s just a more obvious problem on mobile. Is there a place I should remove it in the PHP?
Let me know what you think would be best.
Kelsey
Hey ksully, glad the first problem is solved. For the second, if you right click the text in Chrome and go to Chrome Inspector, you will be able to see the class that affects that particular block of text. From what I can tell, the class .block-title seems to be the css class that is positioning the text. If you add “top: 1em;” to .block-title you should be able to center the text a bit better. If you click on the css code in the Chrome Inspector you can adjust it live in the browser and see the effect for yourself.
@jjchrisdiehl thanks for helping!
@ksully913 can you show me with a screenshot what you’re trying to do with the main header? The text is already “almost” in the center (20px difference between top and bottom). I can help you tweak that but I want to be sure of what you need.
Best regards,
LyraThemes
