Truly Minimal – letter spacing

robertsjo · Member · Aug 11, 2013 at 10:25 pm
Copy link

Add topic to favorites
Hello!

Any way of making a bit more space between the lettering in the header? Looks a bit cramped. I tried
h1 {
letter-spacing; 0.2em;
}
(and experimented with sizes)
but nothing happened. Thanks!!

The blog I need help with is: (visible only to logged in users)
timethief · Member · Aug 11, 2013 at 10:31 pm
Copy link
Hi there,
I see you have posts into 4 threads now including this one.
https://en.forums.wordpress.com/topic/reduce-spaces-and-remove-menu-truly-minimal-theme?replies=8#post-1385070
https://en.forums.wordpress.com/topic/queries-re-truly-minimal-theme?replies=6#post-1385113
https://en.forums.wordpress.com/topic/too-much-space-in-drop-down-menu-truly-minimal-theme?replies=1#post-1385173

I’m responding only to let you know that it’s a weekend and these are peer support forums. When a Volunteer who helps with CSS editing (or Staff member) logs in they will deal with all CSS editing threads in order of those the earliest date stamps first and move forward to the most recent ones.
robertsjo · Member · Aug 11, 2013 at 10:40 pm
Copy link
OK, thanks!
timethief · Member · Aug 11, 2013 at 10:51 pm
Copy link
I didn’t want to leave you holding your breath, so to speak. You’re welcome.
andymci · Member · Aug 12, 2013 at 3:03 am
Copy link
Hello again! Try this:

h1.site-title a { letter-spacing: 0.2em; }

(Changing “0.2em” to whatever you want, of course.)

Targeting the anchor tag (“a”) seems to be the key here for styling the header text in Truly Minimal.
robertsjo · Member · Aug 12, 2013 at 5:07 pm
Copy link
That’s great – many thanks! Looks much better.

Btw, any idea how I could move the title of each page over to the left?
I’ve tried calling it h2/h2 a/ .entry-title, but none of them work! Thanks in advance!
andymci · Member · Aug 12, 2013 at 5:25 pm
Copy link
Try this:

.entry-title a { text-align: left; }
robertsjo · Member · Aug 12, 2013 at 5:32 pm
Copy link
Doesn’t move it… I can’t figure out why. Any thoughts? Thanks!
andymci · Member · Aug 12, 2013 at 7:07 pm
Copy link
Trial and error time. Let’s get more specific:

h1.entry-title a { text-align: left; }
fabianapsimoes · Member · Aug 12, 2013 at 8:20 pm
Copy link
Hey there,

Did you try the following CSS?
```
.entry-title {
    text-align: left;
}
```
If you take a look at your page’s source code, you see that the titles are not between tags, so targeting “a” in your CSS selector won’t do it. Your titles are between <h1> tags with “entry-title” as a class, that’s why I’m guessing “.entry-title” or “h1.entry-title” should do it.
robertsjo · Member · Aug 12, 2013 at 10:02 pm
Copy link
Many thanks, both! Fabian, your suggestion did it!

I now have another problem – it’s looking good my end, but my friend who I made it for sent me a screenshot; the text is higher on the page, the page titles are above the menu, and the top lines of the text are obscured by the menu buttons … aagghhrrhh! I’m using Firefox, and she’s using Safari. We’re both using Macs. Anything I can do to fix this? Thanks!!
fabianapsimoes · Member · Aug 12, 2013 at 10:49 pm
Copy link
Hi @robertsjo,

I’m on Linux, so I won’t be able to give you a hand with Safari issues. Sorry : /

Cross browser compatibility issues are tricky. I’m afraid you’ll have to attack each of the issues individually by tweaking the CSS and checking what happens. You might use Safari‘s and Firefox‘s developer tools to do so.
designsimply · Member · Aug 19, 2013 at 1:39 pm
Copy link
but my friend who I made it for sent me a screenshot; the text is higher on the page, the page titles are above the menu, and the top lines of the text are obscured by the menu buttons …

Sometimes different browsers don’t react the exact same way to CSS. I think in this case, the negative margin value is what’s causing the trouble.

Find this in your custom CSS:
```
.site-header {
	background: none repeat scroll 0 0 transparent;
	margin:0 0 -10em;
}
```
And instead of using a negative margin, just make the bottom margin and padding zero like this:
```
.site-header {
	margin-bottom: 0;
	padding-bottom: 0;
}
```
I think that should put both Firefox and Safari on the right path.

Keep up the good work, the site is looking great!!

No items found.