Modifying CSS in Wordpress theme

[argosbcn]

Discussion continued from W3C validator reliability? - #31 by Archibald

@Archibald

As the errors do not seem to be affecting the appearanc

Could they be affecting the performance or SEO of the page?

body {
font-size : 62.5%;
font-family : orkneyregular, Orkney, Raleway, Sans-Serif;
background : url("images/bg.jpg") top center no-repeat #bcc5c1 !important ;
color : #333;
text-align : center;
margin : 0 0 20px 0;
padding : 0;
}

p {
font-family : orkneyregular, Orkney, Raleway;
font-size : 0.875rem;
font-style : normal;
text-align : justify;
}

I have a problem with the text displayed in the article post. In the CSS, I’ve included these styles to format it by default, but on its desktop version, the text appears very small. Is there any other element in the stylesheet preventing the text of the last post from appearing like the penultimate one without the need for inline CSS, giving it the same size and default justification? [Link to stylesheet]

[Archibald]

@argosbcn

Could they be affecting the performance or SEO of the page?

Analysing your web page with Lighthouse within Google Chrome’s Developer Tools gives an excellent rating of 99/100. It is picking up that, for mobile width pages, the ‘search this site’ input element is overlapped by the magnifying glass graphic, both being interactive elements. It is not picking up any other SEO issues.

@argosbcn

Is there any other element in the stylesheet preventing the text of the last post from appearing like the penultimate one without the need for inline CSS, giving it the same size and default justification?

You can use Developer Tools to inspect text (and other elements) Select the left-most icon on Developer Tool’s toolbar then hover over the text you wish to inspect. If you then click on selected text you will be able to see where the text gets its CSS from. I note in desktop view that the text listing the characteristics of the camera appears rather small. Develop tools shows font-size: 1.2em in this file:
https://www.fotov60.com/wp-content/litespeed/css/5dcb158dce52540584d3bae115f63f3c.css?ver=bf25a
and Developer Tools shows that computes to be 12px.

I am picking up that this file is not available:
https://www.fotov60.com/wp-content/themes/web%20fonts/orkney-regular-webfont.woff
(note the space character is invalid in a URL and has been replaced by %20).

There is a really staggering amount of CSS: in five files (I think) and inline. Your blog could be styled with a tiny fraction of this CSS if coded without WordPress.

[argosbcn]

@Archibald

There is a really staggering amount of CSS: in five files

That’s why I left the direct link to the original CSS https://www.fotov60.com/wp-content/themes/fotov60/style.css?ver=4.4 because Litespeed minified and chunked it to optimize it for site speed, making it hard to view the content correctly. In the link at the end of my previous post, you’ll find the single CSS file instead of the 5 created by Litespeed, allowing you to see all the styles applied at once. If not, using Developer tools directly on the already optimized website can be confusing regarding the origin of the CSS.

@Archibald

I am picking up that this file is not available:
https://www.fotov60.com/wp-content/themes/web%20fonts/orkney-regular-webfont.woff

To fix the font issue, would you recommend changing the folder name containing it to ‘webfont,’ without spaces, to avoid this problem?

@Archibald

Your blog could be styled with a tiny fraction of this CSS

Once the text issue is resolved, I’d like to reduce the size of this file, but I’m unsure where to start as it handles presenting the mobile view of the WordPress theme, and I’m afraid of breaking it.

[argosbcn]

@Archibald

You can use Developer Tools to inspect text

If I want to be able to use Developer tools directly, I have to enter this other URL https://www.fotov60.com/?LSCWP_CTRL=before_optm to prevent Litespeed’s work on the CSS, and then truly see where each element comes from, as I mentioned in my previous post, it’s in that CSS stylesheet I shared the link to. The issue is that I don’t know what to modify to make it look as I expect, as I thought I was doing it right, and apparently something interferes with the final result.

[Archibald]

@argosbcn

That’s why I left the direct link to the original CSS

I was referring to the staggering amount of CSS used by your online web page, although it is a fairly simple web page.

@argosbcn

To fix the font issue, would you recommend changing the folder name containing it to ‘webfont,’ without spaces, to avoid this problem?

I think my browser and your server are taking care of the space character in the URL (by using URL encoding). Is orkney-regular-webfont.woff file in that folder on your server?

@argosbcn

The issue is that I don’t know what to modify to make it look as I expect, as I thought I was doing it right, and apparently something interferes with the final result.

Please give the location of an example of what you are wanting to modify and what modification you wish to make.

[argosbcn]

@Archibald

Is orkney-regular-webfont.woff file in that folder on your server?

Here is a screenshoot of cpanel, showing the folder and the fonts in it.

@Archibald

Please give the location of an example of what you are wanting to modify and what modification you wish to make.

This is an example of how I would like the text to look. I think I’ve already achieved it with the headings, but with the rest of the text is where I encounter problems. I managed to style the example text through inline CSS, but what I’m interested in is that it is well defined in my CSS stylesheet so that inline styling is not necessary. The latest post visible on my blog is the one to which I haven’t applied any inline styles, and it doesn’t display correctly. To view its CSS correctly through Developer tools, you need to visit the blog through this link https://www.fotov60.com/?LSCWP_CTRL=before_optm to prevent the Litespeed plugin in WordPress from modifying the CSS.
Is Orkney a good choice for titles and texts, or is it better to use Raleway for the text?

@Archibald

I was referring to the staggering amount of CSS used by your online web page, although it is a fairly simple web page.

It’s possible that there are duplicated parts and/or disordered code, but a freelance developer added responsive functionality through CSS to a theme I was using before and wanted to keep. I had previously “fixed” small issues I had come across. Can you think of a way to streamline the code without the risk of “breaking” something?

At the moment, I’ve identified some things that I believe I don’t use on my blog. If you can confirm that I can safely delete them, I would appreciate it.

.fourofour {
  font-size: 10em;
  font-family: orkney, serif;
  color: #cc0000;
  padding: 0px 0 16px 0;
  margin-bottom: 10px;
  border-bottom: 2px dashed #000;
}

#share-digg a:hover {
  background: url("images/social-icons.jpg") -138px -41px no-repeat;
}

#share-delicious a:hover {
  background: url("images/social-icons.jpg") -206px -41px no-repeat;
}

#share-stumble a:hover {
  background: url("images/social-icons.jpg") -275px -41px no-repeat;
}

#share-technorati a:hover {
  background: url("images/social-icons.jpg") -344px -41px no-repeat;
}

.friend-link a {
  background-image: url('images/friendfeed.gif');
}

.flickr-link a {
  background-image: url('images/flickr.gif');
}

.lastfm-link a {
  background-image: url('images/lastfm.gif');
}

[Archibald]

@argosbcn

Here is a screenshoot of cpanel, showing the folder and the fonts in it.

Font family ‘Orkney’ is being used OK, so I wonder if file orkney-regular-webfont.woff is corrupt in some way. At least it does not look like the space in the URL is causing the issue.

@argosbcn

This is an example of how I would like the text to look.

On your Hasselblad blog, Developer Tools (I’m using Firefox) is showing the text to be ‘Orkney’ (as ‘orkneyregular’ has failed to download), 0.875rem (=14px), rgb(51, 51, 51). This is declared in lines 302 to 307 in style.css, with the color declared as a default for the body on line 34.

The text in your screenshot above seems to be 20px (=1.25rem) and may be black, not dark grey . . . . as far as I can tell from the screenshot.

@argosbcn

Is Orkney a good choice for titles and texts, or is it better to use Raleway for the text?

When looking at any website, I usually take no notice of what the text looks like. Perhaps that is just a personal thing and that I am not very observant. I think many website designers pay much too much attention to appearance details and often not enought attention to text content, image content and navigation. Reading your blog, I would not have been aware that the text is anything other than ordinary sans-serif.

As mentioned a while ago, I am surprised the subheading text of your blog appears in a larger font than the main heading text.

@argosbcn

Can you think of a way to streamline the code without the risk of “breaking” something?

Reducing some CSS is going to make no noticeable difference. Even though style.css alone runs to 2490 lines of code, your total CSS (not only style.css) is only 8.2% of your page load size (with Litespeed).

[argosbcn]

@Archibald

The text in your screenshot above seems to be 20px (=1.25rem) and may be black, not dark grey . . . . as far as I can tell from the screenshot.

You can view the content of the screenshot directly on the blog in the second post on the main page to see its actual relative size. I don’t think inline CSS would be very useful for determining its size since it’s only defined as <p class="has-text-align-justify has-medium-font-size">, and I can’t find its equivalent in em or rem.

@Archibald

the text to be ‘Orkney’ (as ‘orkneyregular’ has failed to download), 0.875rem (=14px), rgb(51, 51, 51).

The CSS you mention is the following, right?

  font-size: 62.5%;
  font-family: orkneyregular, Orkney, Raleway, Sans-Serif;
  background: url("images/bg.jpg") top center no-repeat #bcc5c1 !important;
  color: #333;
  text-align: center;
  margin: 0 0 20px 0;
  padding: 0;
}

p {
  font-family: orkneyregular, Orkney, Raleway;
  font-size: 0.875rem;
  font-style: normal;
  text-align: justify;
}

What do I modify in them to make it correct?

@Archibald

At least it does not look like the space in the URL is causing the issue.

I think you’re right about this, because otherwise, the rest of the fonts wouldn’t load being in the same folder, right? Maybe the best option is to remove that font and its loading in the CSS? With the Orkney font available in all other formats, I can do without orkneyregular, which is in WOFF format, I believe.
Speaking of fonts, is it good to load bold, italic versions, etc… or is the regular version enough?

[Archibald]

@argosbcn

I don’t think inline CSS would be very useful for determining its size since it’s only defined as <p class="has-text-align-justify has-medium-font-size">, and I can’t find its equivalent in em or rem.

The class has-medium-font-size is defined, via a CSS variable, in line 92 of the HTML. It is a long line . Here are the CSS variables for font size in that line.

--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;

Note the declation includes the !important rule:

.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}

@argosbcn

The CSS you mention is the following, right?

Yes, I was mentioning the p {....} declaration on lines 302 to 307.

[argosbcn]

Using vw units might be a better option to achieve a responsive result?

@Archibald

Yes, I was mentioning the p {....} declaration on lines 302 to 307.

Then I must modify like this?

body {
font-size : 62.5%;
font-family : orkneyregular, Orkney, Raleway, Sans-Serif;
background : url("images/bg.jpg") top center no-repeat #bcc5c1 !important ;
color : #000;
text-align : justify;
margin : 0 0 20px 0;
padding : 0;
}

p {
font-family : orkneyregular, Orkney, Raleway;
font-size : 20px;
font-style : normal;
text-align : justify;
}

Can I combine the styles of <body> and <p> into one, or do they each belong to a different element? If yes, how would it look?

Once these changes are made, can I remove the inline CSS from the example post?

@Archibald

As mentioned a while ago, I am surprised the subheading text of your blog appears in a larger font than the main heading text.

Do you check in dev tools or is only at eye checking?
In principle, you can see that the titles are defined with descending sizes, unless another rule is affecting them.

h1 {
  font-size: 4.8em;
  font-family: orkneyregular, Orkney, Raleway;
  text-transform: uppercase;
  padding: 0 0 0 39px;
}

h1,
h1 a,
h1 a:hover,
h1 a:visited,
#header .description {
  text-decoration: none;
  color: #000;
}

h2 {
  font-size: 2.8em;
  font-family: orkneyregular, Orkney, Raleway;
  font-weight: normal;
  line-height: 1em;
  padding-bottom: 9px;
}

h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited {
  font-family: orkneyregular, Orkney, Raleway;
  color: #cc0000;
  text-decoration: none;
}

#sidebar h2,
#wp-calendar caption,
cite {
  text-decoration: none;
}


h3 {
  font-size: 2.5em;
  line-height: 1em;
  font-weight: normal;
}

H4 {
  font-size: 2.4em;
  font-family: orkneregular, Orkney, Raleway;
  color: #000;
  line-height: 1em;
  padding: 0px;
}

H4.footerwidget {
  padding-top: 20px;
}

H5 {
  font-size: 2em;
  font-family: orkneyregular, Orkney, Raleway;
  color: #000;
  line-height: 1em;
  padding: 12px 0 12px 0;
}


H6 {
  font-size: 1.6em;
  font-family: orkneyregular, Orkney, Raleway;
  color: #000;
  line-height: 1em; 
  padding: 0px 0 16px 0;
}

[Archibald]

@argosbcn

Can I combine the styles of <body> and <p> into one, or do they each belong to a different element? If yes, how would it look?

I suggest you keep that CSS. The body declaration acts as a ‘default’ for your whole web page. However I think Sans-Serif should be sans-serif.

@argosbcn

Do you check in dev tools or is only at eye checking?

I noticed that by eye.

@argosbcn

In principle, you can see that the titles are defined with descending sizes, unless another rule is affecting them.

Your blog title and your subheadings are all <h2> elements (Hasselblad blog at least).

Developer Tools shows the blog title is 28px while the subheadings are 33.6px.

<h2> has font size 2.8em which means that it is 2.8 times the size of the font size of its parent element. The parent element is <div class="entry"> which on llne 148 of style.css has a font size of 1.2em. So this is 1.2 times the size of its parent element. The parent element’s font size comes from the font size of the <body> on line 29 of style.css. The body font size is declared as 62.5% so that means it is 62.5% of the default browser font size which is usually 16px. So working that out the font size of your subheadings will be:
16px x 62.5% x 1.2 x 2.8 = 33.6px

This is how Developer Tools in Firefox shows it:

The font size of your blog title will be the same except that it is not within <div class="entry"> element so is only:
16px x 62.5% x 2.8 = 28px

[argosbcn]

@Archibald

<div class="entry">

Is it necessary, or would deleting everything make more sense by not including that multiplication you mentioned?

@argosbcn

Using vw units might be a better option to achieve a responsive result?

What do you think? The VW units don’t depend on a parent element, so there’s no need to fear those “recalculations,” and all screens would appear the same by adjusting based on the resolution, right?

[Archibald]

Especially as you are concerned about SEO, you could make all your sub-headings <h3>? But would that mean editing all the blogs on your website?

If you do not want to make your sub-headings <h3> then we could use CSS:

.entry h2 {font-size: 0.6em;}

. . . . to select <h2> elements within <div class="entry"> to reduce the size of sub-headings (some other value of em could be chosen). That will not affect main blog headings as they are not within that <div> element.

That would need to go somewhere after line 349 of the style.css file so it is not ovewritten by the declaration on line 349.

@argosbcn

Using vw units might be a better option to achieve a responsive result?

em units are being used so site visitors with poor eyesight can enlarge all the text by changing their browser’s default font size from the usual 16px. You don’t want font size to be proportional to browser window width.

[argosbcn]

@Archibald

to select <h2> elements within <div class="entry"> to reduce the size of sub-headings (some other value of em could be chosen). That will not affect main blog headings as they are not within that <div> element.

If I understand you correctly, then I would need to do the same with the rest of the headers to maintain proportion, right? h3, h4, h5… etc.

Or alternatively, convert the post titles to h1? But I’m unsure of the SEO impact… If my calculations are correct, the size would be 16px x 4.8 = 72px as it’s currently defined. Maybe it’s too large? The current H1 is only applied to the blog logo.

[Archibald]

@argosbcn

Or alternatively, convert the post titles to h1?

I note that your blog title and its subheadings are <h2> elements. I have therefore taken another look at the RNIB, GOV.UK and BBC websites as they will be taking extra care in the use of <h1> <h2> etc elements for blind users of assistive technology. On their home pages their <h1> elements contain the names of their organisations. However on other web pages the <h1> elements describe the contents of each page. I am surprised by this because a user of assistive technology reaching a page via a search engine may not be able to find out easily the name of the website they have reached.

In the circumstances to avoid having to change all subheadings, I suggest you make your blog title <h1> instead of FOTOV6.

My understanding of what is going on with your font sizes is as follows. The 62.5% makes the ‘default’ font size for your website body to be 10px. I think this has been done just to make an easier number to start with than the usual 16px browser default. So if for example some text is required at 18px it would be simply 1.8em instead of 1.125em. I guess the 1.2em has been chosen to make the default font size within each blog, excluding blog title, to be 12px (which is rather small). The <li> element on your Hasselblad blog ends up this size. Your "Posted . … " text includes <small> so that ends up only 11px. I suggest you review all your font sizes, taking into account the multiplication involved because of the use of ‘em’ units. Make sure any changes you make do not affect your left side bar or footer.

[argosbcn]

Initially, based on the CSS, there are h2, #sidebar h2, and .sticky h2. The first two seem to be for post header 2 and sidebar header 2, but I’m unsure about the last one. Modifying h2 may not affect the sidebar ones, but while testing the appropriate size for post h2, I’ve noticed it proportionally changes the title sizes. It might be the 1.2em multiplier from the parent element

. To adjust, you might need a multiplier for the titles that counteracts the entry multiplier to equalize both elements. How to achieve this?

I’ve resolved paragraph styles and font loading issues in the dev tools. Could you confirm if it looks good for you and the remaining issue is with the headers?

@Archibald

The <li> element on your Hasselblad blog ends up this size

I don’t find the line to change the size

@Archibald

Your "Posted . … " text includes <small> so that ends up only 11px

Wich one is this text?

[Archibald]

@argosbcn

I’ve resolved paragraph styles and font loading issues in the dev tools. Could you confirm if it looks good for you and the remaining issue is with the headers?

I thought you had only the Hasselbald blog on your home page. I see you now have four blogs on your home page. As it is strongly recommended that you should have no more than one <h1> element on a web page, you should not convert post titles to <h1> as you queried in post #14. Post titles therefore should be <h2> and subheadings should be <h3>.

Developer Tools is showing this text to be Tahoma 11px:
Posted: 25/01/2024 by Agusti Pardo in Hasselblad
I am surprised Lighthouse is not reporting that text and your list text as being too small for accessibility. See:

Document doesn't use legible font sizes  |  Lighthouse...

I expected the <small> tag used on that line to simply make the text smaller but I see its text size and font are declared on line 472 of style.css and its colour on line 592.

I see the main text of your Hasselblad box to be Orkney 22.8px, while the main text of your nighshade and Mestre blogs is Orkney 20px and the main text of your EL TRADE blog is arial 18.6667px.

Are you expecting visitors to your website to be able to read the text in an image regarding "Comunicado publico frente oliver sinisterra . . . "?

This image become illegible on a small smartphone (here with 320px wide screen):

. . . . assuming the website’s responsiveness works from width of screen.

[argosbcn]

@Archibald

I see the main text of your Hasselblad box to be Orkney 22.8px, while the main text of your nighshade and Mestre blogs is Orkney 20px and the main text of your EL TRADE blog is arial 18.6667px.

My intention is to polish the CSS in the Hasselblad post, where I haven’t used any inline styling. Once I have the correct CSS sheet for paragraphs, headers, etc., I’ll gradually remove inline CSS from older posts to match the Hasselblad style. This way, I’ll save a lot of code and keep it cleaner, avoiding discrepancies in fonts, sizes, headers, etc. I ask for your validation of the changes I’m making to check what I can keep as valid and address anything not following the “correct” aesthetic for standardizing the style.

@Archibald

I thought you had only the Hasselbald blog on your home page. I see you now have four blogs on your home page.

Actually, I have about a thousand posts, but only the latest ones are displayed on the main screen. I showed you the Hasselblad post because of what I explained in the previous paragraph. The post title is an h2, the main headings within the post are also h2, and then the smaller titles are h3. That’s why there’s confusion when changing the size of h2.

@Archibald

Are you expecting visitors to your website to be able to read the text in an image regarding "Comunicado publico frente oliver sinisterra . . . "?

If you’re referring to this one, clicking on the image opens the page with the document https://www.fotov60.com/wp-content/uploads/2018/04/comunicatFARC_EP.jpg, allowing you to zoom in. What’s the issue?

@Archibald

This image become illegible on a small smartphone (here with 320px wide screen):

I thought I had uploaded the image for it to open the same way as in the previous paragraph. Clicking on it should open it in full size for proper examination. Thanks for the heads up. I’ll correct it by re-uploading so that it behaves as I mentioned.

@Archibald

Developer Tools is showing this text to be Tahoma 11px

Would you change the font to Orkney, used in the rest of the text, and make it slightly larger, or would you keep it as Tahoma?

[Archibald]

@argosbcn

My intention is to polish the CSS in the Hasselblad post, where I haven’t used any inline styling. Once I have the correct CSS sheet for paragraphs, headers, etc., I’ll gradually remove inline CSS from older posts to match the Hasselblad style. This way, I’ll save a lot of code and keep it cleaner, avoiding discrepancies in fonts, sizes, headers, etc.

That is helpful information.

@argosbcn

I ask for your validation of the changes I’m making to check what I can keep as valid and address anything not following the “correct” aesthetic for standardizing the style.

The aesthetic style is your choice, not mine. However I can point out where in my opinion improvements can be made. To my eyes the main issues at present remain:

• your “main headings” (that I have been calling “subheadings”) are in a larger font than the post titles;
• your list items are in a much smaller font than ordinary paragraphs.

@argosbcn

The post title is an h2, the main headings within the post are also h2, and then the smaller titles are h3. That’s why there’s confusion when changing the size of h2.

As the post titles are <h2>, why do you not make the main headings (“subheadings”) <h3>? Is that too much work?

@argosbcn

If you’re referring to this one, clicking on the image opens the page with the document https://www.fotov60.com/wp-content/uploads/2018/04/comunicatFARC_EP.jpg, allowing you to zoom in. What’s the issue?

I was not aware that you can click on the image to enlarge it. We ought to consider whether that enlargement would be satisfactory for smartphone users.

When I click on one of the six photos (Porsche etc), I get a page showing just the Hasselblad blog.

@argosbcn

Would you change the font to Orkney, used in the rest of the text, and make it slightly larger, or would you keep it as Tahoma?

The font is your choice but, as mentioned, I am surprised Lighthouse does not say that the size is too small (not legible). You can increase the font size on CSS line 474.

In my personal opinion the font size of ordinary paragraphs (22.8px) is larger than most websites. I suggest you try editing CSS line 304 to font-size : 1.5em; which will give 18px font size. The present rather large font size becomes an issue with small smartphones, especially as you are justifying the text. Here, emulated via Google Chrome, is how some of the text will appear on a small smartphone:

We can deal with the small text of list items later.

[argosbcn]

You’re right, I was working on the size for the desktop version and didn’t take into account how it looks on the mobile version. Does it maintain the same size as the desktop in the mobile version?

I’ve thought about the sizes could being:

H2 (post title) - 20 px
p - 18px
H1 - 32px
H2 - 20px
H3 - 18 px
H4 - 16 px
H5 - 14 px
H6 - 12 px
Is there any text element left to define its size? Do you think the relationship between them is appropriate? How should I express it in “em” to do it correctly?

I’ve been reviewing the analysis from pagespeed.web.dev, and I’ve noticed that my score has dropped significantly, from 99 to 86, due to these two elements shown in the screenshots. Are they part of the CSS that defines the text style or the design structure of the website? I ask because if they impact the text, perhaps it’s time to fix them to simplify the text style, right?