Need to adjust size of widget and child page

solaristherapyadmin · Member · Mar 10, 2015 at 10:11 pm
Copy link

Add topic to favorites
I have tried to figure out what the css is for these two areas but I can’t. My site is private right now so I’ll do my best to explain unless someone can explain how to insert screen grabs.

I have a child page where the headline is not showing correctly.

Basically, it looks like this:

Allyson Alli, Administrative Assist
ant

I also have a widget where the headline is too long and I need to adjust the width so that everything is on one page. This is the front page widget.

My headline looks like this:

~ Conditions we treat
~

I am using the Sela theme

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 10, 2015 at 10:24 pm
Copy link
WordPress, by default, puts a non-breaking space between the last two words in sentences and titles so that single words don’t get orphaned on the last line. In this case though, it causes an issue (two long words together). Open that post in the editor and replace the space between Administrative and Assistant with the following. Note: I’ve had to use a space between the & and e so that it will show up here in the forums. Remove that space.
& ensp;
solaristherapyadmin · Member · Mar 10, 2015 at 10:45 pm
Copy link
Thank you.

But that fix does not work for my widget. I need the dash that has moved to the second line to be in the same line as the headline.
sandymcfadden · Member · Mar 11, 2015 at 5:21 pm
Copy link
Hi there,

There are a couple of approaches we could take to do this for the widget titles. There is CSS that is adding dashes before and after the title. It looks like this:
```
.widget-title::before, .widget-title::after {
    content: " - ";
}
```
We could either remove the dashes all together by adding this CSS rule
```
.widget-title::before, .widget-title::after {
    content: "";
}
```
But if you want the dashes there we could add non breaking spaces in the CSS content. That would look like this:
```
.widget-title::before, .widget-title::after {
    content: "0a0-0a0";
}
```
Hope that helps.
sandymcfadden · Member · Mar 11, 2015 at 5:23 pm
Copy link
The forum software removed some of the characters from the last option. It should look like this screenshot instead.
solaristherapyadmin · Member · Mar 11, 2015 at 8:50 pm
Copy link
Thank you. That does help a little. The only thing now is that the text looks left adjusted, not centered. Is there any way to rectify that?
sandymcfadden · Member · Mar 12, 2015 at 10:17 am
Copy link
Are you referring to the title text of the widgets or the main text of the widgets?
When I look at the titles they still appear to be centered to me.
thesacredpath · Member · Mar 12, 2015 at 7:42 pm
Copy link
The titles of the widgets are actually centered within the width of the widget title div, but when using the before and after pseudo classes to add text, those elements are not included in the centering calculation.

My suggestion is to include the dash and space before and after in the widget title itself, so that they will be included in the centering. Or, don’t include them at all.

On responsive width themes such as Sela, the widget widths change with screen/window widths, so there really isn’t a clear solution to the title alignment issues.
solaristherapyadmin · Member · Mar 12, 2015 at 8:17 pm
Copy link
What I would really like is for the dash to be on the same line as the headline, rather than the headline be broken up into two lines. Is there any way to do that?
thesacredpath · Member · Mar 13, 2015 at 7:32 pm
Copy link
Because the widgets have a width setting that is a percentage of the parent #secondary div, we really can’t guarantee that the widget titles will not, at some point, break to two lines.

We could reduce the font size for the widget titles, but to keep everything on one line, we end up with them smaller than the content text in the widget. We could gain a little more font size by making the widget titles normal instead of all caps, but they are still smaller than the content of the widgets.

My suggestion would be to not use the dashes at all and then do the following so that when the titles do break to two lines, things look the best they can.

Conditions we treat: put a non-breaking space between we and treat so they both go to the second line together.

Same for Therapies between we and offer.

Free Consultation can remain as is since it is only two words.

To provide a highlight for the widget titles, you may consider adding a light grey background color to them instead of using the dashes. You can try this CSS and see what you think and of course, you can adjust the color as desired.
```
#secondary .widget-title {
    background-color: #f4f4f4;
}
```
solaristherapyadmin · Member · Mar 14, 2015 at 3:46 am
Copy link
Thank you both! I have removed the dashes and put a highlight behind. Looks great!
thesacredpath · Member · Mar 16, 2015 at 6:05 pm
Copy link
Hooray, and I’m so glad we found a solution that works for you. If you have any further questions, just let us know.

No items found.