Modifying CSS in Wordpress theme

If the line height is declared with no units, the line height works out to be the font size times the line height value.

1 Like

“I understand what you mean, I was referring to the fact that in the .column .entry besides the font-size, there is a line-height: 1.8em; and I didn’t know if that line-height would also affect <p> or <body> in the same way that the font-size did to <p> and <body> before changing it.”

Okay, I’ve changed the font-size to 1em for .column entry, I’ve included font-size: 1.4em; in .entry li, and I’ve defined the line-height of <p> to 1.5. I think that covers the basics of the text, except for the headers, the post title, and the ‘posted by’ section…

I’ve noticed that both the top menu bar (with a font named emoji) and the sidebar have a different font and also varied sizes. Should I unify them like I did with the post text?

Developer Tools shows that currently you have line-height for <p> elements declared as 1.5 (with no units) and that this value is superseding the 1.8em declared for .column .entry (here in Firefox):

line-height

Incidentally it is rather surprising that a value of 1.5 is recommended for accessibility but browsers tend to default to a value of 1.2.

By declaring line height without units, the line height will scale proportionally if a website visitor with poor eyesight enlarges the font. This is desirable.

Line height for <li> elements is currently 1.8em. I suggest you add a line of CSS after line 830 (font-size: 1.4em;) to declare line height to be 1.5. Note <li> elements are spaced from each other by margins. The line height value will affect list items having more than one line of text, for example Notas Importantes 6.

You’re right, I was going to mention that I found it somewhat strange. I’ve already changed the line-height and added “text-align: justify” because the words were centered with spaces on the left and right, and with each line, those spaces were increasing. Does it look good now?

Yes the list text looks OK now, but you are in charge of aesthetic appearance, not me :grinning:.

Unfortunately while the paragraph and list text of the first blog on your home page now looks good, your CSS changes have not affected the other blogs on your home page. Developer Tools show that the paragraph <p> text is being styled by the CSS on line 95 of your HTML file. Most paragraphs have been given these two classes in the HTML tag::
<p class="has-text-align-justify has-medium-font-size">

On HTML line 95 the font size is set by:
.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}
Where the CSS variable has been set on line 95 by:
--wp--preset--font-size--medium: 20px;

This is taking precedence over your recently edited <p> font size declaration of 1.6em.

I guess you have chosen 20px at some point within WordPress, but not for your first blog for some reason.

I am not sure, but I think if on line 95 if you edit:
--wp--preset--font-size--medium: 20px;
to:
--wp--preset--font-size--medium: 1em;
then your 1.6em will come into play (and the text will become accessible for those with poor eyesight).

As well as the issue with styling sub-headings, you may like to give some attention to photo caption text.

By simulating a small smartphone in Google Chrome, I see that photos are being squeezed:

squish

Yes I know :stuck_out_tongue_winking_eye: but I preferr an objective eye to confirm the changes because to not miss any important detail, because this CSS sheet is a catch-all.

I’m aware of that. That’s why I’m using Hasselblad’s latest post to fix and refine the CSS sheet so that nothing is overlooked, and I’m not using any inline styles that could interfere with the rules defined in the CSS sheet.

So far, since it wasn’t properly configured and I didn’t have enough knowledge (although I asked whoever adjusted the theme to be responsive to do it) to achieve a “relatively aesthetic” display in all the posts prior to Hasselblad’s, I used inline CSS, which is the only thing I more or less master. I was giving it the appearance and display so that it could be read with a minimum of comfort.

Seeing that the developer didn’t make these adjustments to the CSS sheet, and upon discovering sitepoint, that’s when I decided to start modifying “deeply” on my own with your help the CSS styles, and once I obtained the “perfect CSS sheet” that allows publishing posts without any inline CSS and that the page display is correct, continue publishing posts more easily and the most complicated part is somehow managing to eliminate all the excess inline CSS from the old posts so that when they are left “bare,” the style of the CSS sheet is applied as it is now in Hasselblad’s post. I don’t know if I explained it very well.

I made the gallery with the WordPress media tool. Is there any adjustment I can make to it to fix this?

The blog heading title and the subheadings are now both 28px due to 2.8em on line 339 of the CSS file.

To reduce the size of subheadings, so they do not look like main blog headings, you need to insert this after the CSS rule on lines 338 to 344:

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

Hopefully that will make the subheadings 20px by selecting only the <h2> elements that are within (“decendents of”) elements that have class ‘entry’. Of course you can choose some other value of em.

May be best to start a new forum thread so as to find someone who is familiar with the WordPress media tool. The situation is not helped by the rather wide margins to the left and right. We could probably reduce those margins on smartphones by using an @media rule. My code in post #22 shows one way of making the images and captions responsive with custom code.

About this, on line 705 of the CSS file, there’s the following code:

h2.archivetitle {
  margin-top: 0px;
  color: #000;
  font-size: 2.5em;
  text-transform: uppercase;
  border-bottom: 1px dashed #575b59;
}

Am I mistaken to think that it defines the style and font size of the h2 titles of the posts? When I select the post title in the browser’s developer tools, it shows as inherited from h2.pagetitle, which is right above in the CSS file, and the nomenclature is similar. Or is it unrelated?

I am not seeing that.

This is what I see in Firefox Developer Tools when I inspect the subheadings:

FOTOV9

I’m referring to what you see highlighted in these screenshots

h2pagetitle3

I am referring to the subheadings within the Hasselblad blog: for example “Un Vistazo a las Caracteristicas…” ".

I suggest you make the subheadings smaller so they do not appear the same as the blog’s main heading.

Okay, I’ve introduced the line you mentioned (giving it a value of 2.3em instead of 2em because it seemed too small), and only the sizes of the internal post titles have changed. I’ll paste the code of the headers as it currently stands for you to give me your opinion on the size of the other headers (I had to reduce them according to the reduction of h2), in case I need to add some code like a line-height, and to know if I should rearrange something or if something is wrong

h1 {
  font-size: 4.8em;
  font-family: 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: Orkney, Raleway;
  font-weight: normal;
  line-height: 1em;
  padding-bottom: 9px;
}

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

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

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


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

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

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

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


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

.sticky h2 {
  padding-top: 10px;
}

a:hover,
h3 a:hover {
  color: #0000ff;
  text-decoration: underline;
}

h2 a:hover,
h3 a:hover {
  color: #0000ff;
  border-bottom: 1px dashed;
  text-decoration: none;
}

h1 {
  padding-top: 61px;
  margin: 0;
}

h2 {
  margin: 30px 0 0;
}

h2.pagetitle {
  margin-top: 0px;
  width: 512px;
}


h2.archivetitle {
  margin-top: 0px;
  color: #000;
  font-size: 2.5em;
  text-transform: uppercase;
  border-bottom: 1px dashed #575b59;
}

#sidebar h2 {
  margin: 5px 0 0;
  width: 208px;
  height: 39px;
  font-size: 12px;
  text-transform: uppercase;
  padding: 11px 0 0 47px;
  background: url('images/sidebar-headings.gif') top left no-repeat;
  color: #eef0eb;
  font-family: Tahoma, Verdana, Sans-Serif;
  font-size: 1.2em;
  font-weight: bold;
}


#sidebar h3 {
  margin: 5px 0 0;
  width: 208px;
  height: 39px;
  font-size: 12px;
  text-transform: uppercase;
  padding: 11px 0 0 47px;
  background: url('images/sidebar-headings.gif') top left no-repeat;
  color: #eef0eb;
  font-family: Tahoma, Verdana, Sans-Serif;
  font-size: 1.2em;
  font-weight: bold;

}

h3 {
  padding: 0;
  margin: 8px 0 18px;
}

h2.pagetitle{
    width: 100%;

Note: I have included all elements related to the headers, removing lines of CSS, so they are not all together in the file but following this order. For example, the penultimate line of code is found on line 745, and the last line of code in the style sheet is on lines 2135, 2272, and 2413.

The blog text looks good to me now.

Do you find the size ratio from h1 to h6 appropriate, or would you change the value of any of them? Do we need to define a line-height as I did with the <p> text? The headers h4, h5, and h6 do not have hx a, hx a:visited defined, unlike h1, h2, and h3; is that correct?

Just because HTML allows six levels of heading tag, it does not mean you need to use all six levels. Using two or three levels is usually sufficient.

I suggest you edit the CSS such as line-height only if you wish to change the appearance of your web page. There are no “correct” values for CSS declarations but you should consider accessibility and the appearance on small smartphones. It is up to you to decide how you wish your web page to appear. It comes down to personal taste and aethetics.

I suggest it would be more worthwhile turning your attention to the photos and captions on your Hasselblad blog. I’ve suggested you start a new thread in the hope of finding a forum member familiar with the WordPress media tool.

1 Like

I know there are no correct values, but I’m looking for the most accessible ones so that anyone can read them correctly on the devices they view them on and have appropriate visual coherence.

So, do you think all the styles related to the posts are within those accessibility and visual coherence values now?

If I’ve interpreted the CSS sheet correctly, the mobile and tablet versions are defined through Media Queries for various screen sizes. I’m not sure if it’s possible, but could I define the appropriate values for each screen defined within each set of Media Queries, thus optimizing the accessibility of each one?

I want to do it, but to stay focused, I wanted to wrap up this section of adjustments before turning my attention to the photos and captions, or fixing the sidebar and the top menu like the post text.

Lighthouse in Google Chrome is showing a score of 100 for accessibility. However Lighthouse tells you what aspects it cannot check for accessibility.

Lighthouse is currently testing with a screen width of 415 pixels although it is reported that the smallest smartphone has a screen width of 320 pixels. In my view that main thing to watch out for is large text with words that cannot fit within the available width (including margins, borders etc). I like to ensure that I do not have overflowing text if the screen width is 320 pixels. If necessary the text size can be varied using media queries. Your text looks OK to me with 320 pixel screen width.

Must I change this?

For info only the media queries sizes in CSS are:

/*For desktop only*/
@media (min-width:900px) {
---------------------
@media screen and (max-width: 768px) {
----------------------
/*Extra large tablet screen only*/
@media (min-width: 768px) and (max-width: 899px) {
-----------------------
/*for tablet screen*/
@media (max-width: 768px) {
-----------------------
/*Responsive for mobile*/
@media (max-width: 520px) {
-----------------------

You can edit that if you wish on lines 462 to 467 of the CSS file.

I have changed it to 1.3 em, does it look better like this?