Help with changing the header font on the Portfolio page

Support
#1

Hi there,

Apologies for needing basic css help, but I’m trying to change the font size of the entry title font (see attached) of my portfolio page.

I’ve used this code, which works properly in the browser inspector, but when I pasted it into custom CSS has not changed anything. Can you point me in the right direction please?

h2.entry-title.entry-title-portfolio {

font-size: 125%;

}

#2

Hey Dennis

Yes, that code should work. I don’t see that code added in your custom CSS though. Did you add the code in Appearance > Customize > Additional CSS? It’s possible that you have syntax error in your before that code so WordPress won’t accept the code nor allow saving. Please check all your CSS in http://csslint.net/

That goes the same if you’ve inserted the code in X > Theme Options > CSS. The Global CSS is more forgiving but you need to watch out for syntax errors too.

If there are no syntax errors in your CSS code, it could be a saving issue which usually is caused by low memory. Sometimes, you can’t see the result immediately because of aggressive caching. Please also try:

  1. If you’re using a caching plugin, clear all caches including browser cache then deactivate your caching plugin and other optimization plugins.

  2. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  3. Contact your host to increase your allocated memory or do it yourself by adding this code in your wp-config.php

define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

Thanks.

#3

Thanks Christian,

Looks like it was a caching issue, and the code has worked now!

Can I ask you a followup question please?

I’m using The Grid to display my portfolio on a new home page, and I’m having problems with word breaks.

I’m trying to force the header text in my grid to maintain whole words, and not hyphenate and break them across lines (see attached).

Do I need to do this with CSS, or is there a setting that will allow it?

Thanks, Dennis.

#4

Hi Dennis,

Though I don’t see that issue on my end, my advice is to reduce the title font. Because if don’t allow a word-break, a lengthy title will overflow to the grid container (see what I mean here).

Cheers!

#5

Hi Friech,

The font appears to wrap properly (i.e put new words on a new line) in Chrome, but breaks the words (hyphenates) in Firefox and Edge. I’ve attached a screenshot below showing each.

I don’t use words large enough to run over, so I’d definitely like to ensure that there are no word breaks, in any browser. Can you help with this?

Many thanks,

Dennis.

Chrome (correct wrapping)

Firefox and Edge (incorrect word breaks)

#6

Hi,

To fix it, you can try adding this in Theme Options > CSS

body .tg-item .tg-item-title a {
    word-wrap: normal  !important;
    word-break: break-word !important;
}

Hope that helps

#7

Hi Paul,

I pasted in the code, and it hasn’t changed anything. The breaks are still appearing in FF and Edge, but wrapping properly in Chrome. I’ve cleared all caches too/

#8

Please change the code to this:

.tg-item-title a {
  hyphens: none !important;
}

It should work as you see in the demo in the screencast in the secure note.

Hope that helps.

#9

Thanks Christian,

That seems to have done the job, much appreciated!

#10

You’re welcome!
We’re glad our staff were able to help you out.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.