Changing copy in header to be centered

wbtg24 · Member · Jul 19, 2015 at 5:06 pm
Copy link

Add topic to favorites
hello!

i’d like to have my text centered in my header as well as spaced out. So it look something like

B O M B O R A
F I T N E S S
i have no experience with CSS :) my theme is Apostrophe.
thanks so much!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 19, 2015 at 6:04 pm
Copy link
Hi there, give the following a try. I’ve used a Media Query to limit the letter spacing to screens/windows wider than 500px since if we keep it below that the two words in your title start to break within the words and looks funny. I’ve included a second Media Query to make the text in the title a bit smaller on very narrow screens to keep the words in your title from breaking within on phones.
```
@media screen and (min-width: 500px) {
  .site-title {
    max-width: 400px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .site-title a {
    letter-spacing: 6px;
  }
}
@media screen and (max-width: 360px) {
  .site-title a {
    font-size: 85%
  }
}
```
wbtg24 · Member · Jul 20, 2015 at 8:07 am
Copy link
thank you! i’ll give this a try :)
thesacredpath · Member · Jul 20, 2015 at 8:30 am
Copy link
You are welcome. Let me know if you have any issues or questions.

No items found.