widen the title in Pocket theme

ronaldpriehl · Member · Oct 24, 2014 at 5:12 pm
Copy link

Add topic to favorites
Right now the title takes up 5 lines, I would like it to take up 3 lines so it reads…
Ronald P. Riehl
Remodeling & Construction
CCB#

Can anyone tell me how to do that? I’ve combed through everything and assume I have to do something with the CSS…I am not a techy, in fact just the opposite, so really simple language would be much appreciated!
Thanks in advance.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 24, 2014 at 8:05 pm
Copy link
This is a little involved and is not something that can be achieved with CSS alone and it will not work well on smaller tablets and phones. You are going to have to edit your site title at Settings > General and add some code that represents a non-breaking space between some of the words. The following would be the code, but without the space between the & and nbsp;
& nbsp;
You would add that between the following words/symbols in your title at Settings > General

1. Between Ronald and P, between P and Riehl. Leave a normal space between Riehl and Remodeling.
2. Between Remodeling and &, between & and Construction, and leave a normal space between Construction and CCB.
3. Between CCB and #203740.

Next, add the following CSS 70% seems to work for the width to get things to fit correctly. I’ve limited this change to 600px and wider screens
```
.header hgroup {
    width: 70%;
}
```
If you narrow down your browser window you will see a point where your title starts to become hidden. This is because of the non-breaking spaces we have to use to get the line breaks right in your title. The following two media queries will adjust the font size of the site title and hopefully keep things all within the screen width.
```
@media screen and (max-width: 620px) {
	.logo-text {
		font-size: 30px !important;
	}
}
@media screen and (max-width: 500px) {
	.logo-text {
		font-size: 25px !important;
	}
}
```

No items found.