Line Break In Long Post Title

Support
#1

hi

I have two questions, one relating directly to the blog index page and the other to the posts page.

For the index page, how is it possible to format the strikethrough on the blog title, if that is what it is called? It is the line that is directly before and after the blog title. The class ID shows h-landmark, but I don’t know what you call the line to change its color.

I tried .blog .h-landmark and also added :before and span:before to the code then added a color, but got no result.

The second question relates to putting a line break at a specified point in a post title. Some of the posts are long, things like full recipe names in English and Thai. I would love to be able to have the title break at a determined point. I read about adding something like the pipe symbol | which is not meant to be visible in html. Then you use CSS to indicate that this symbol is to be replaced by <br>. I have not had any success trying it that way and I wonder what you could suggest to help break long lines. I added the | and it showed up online in the title, rather than being invisible.

URL is feastthailand.com/blog and you will see a number of the posts have quite long titles.

Thanks in advance

#2

Hi There,

Thank you for writing in, please add this on top of your custom CSS to change the headline accent color.

.blog .h-landmark span:before,
.blog .h-landmark span:after {
	background-color: red;
}

There is something wrong on your custom css because if you put that on the bottom, it does not work. Please check your entire custom CSS here (http://csslint.net/) and address the errors.

You can put a <br /> tag to the title to force a line break.

Hope it helps,
Cheers!

#3

hi Friech

I ran csslint and it brought up 9 CSS errors, but some of them are not errors at all, so not sure what to do.

As an example, it is now showing only 1 error - the following:

@media only screen and (max-width: 768px){
.content {
text-align: justify;
}
}

I fail to see what is wrong with the above media query, but something is stopping much of the CSS from working above 768px, at least on the blog and posts pages. At 768px and below, the the above code you gave works a treat and the headline accent color is changed. At 769px and above, it reverts to the original color and much of the other CSS I have for those pages stops working. Any help gladly accepted on this one, as I can’t spot the media query causing the issue

Incidentally, is there somewhere in particular that media queries should go - top of the CSS file, bottom?

Regards

#4

Hi again Friech

So I just moved that above media query that I showed as an example of an error. I put it higher in the CSS file and that error in csslint disappeared, but then another media query appeared as an error. When I move that media query up further in the CSS file, a further one appears as an error down lower. When I moved that media query, another one even further shows as an error and so on.

After working my way to the bottom of the CSS file, all of the errors have disappeared, except it is now showing a single error on the last line of the CSS; that line has only } in it, and frankly that is not an error. How reliable is csslint?

If I may just ask again, is there a particular place in the file that media queries need to be placed?

regards

#5

Hi There,

Usually this issue happens if there’s missing or extra }. I did check all your custom CSS but it seems fine. No missing or extra bracket. The place of media query matter because of CSS specificity. See this: https://stackoverflow.com/questions/10306670/css-specificity-media-queries-and-min-width. Let say you have 2 media queries, both of this returns true, then the last one will take precedence. But this is not the case for your blog page because the headline accent is there no matter what the screen size is. See this: https://screencast-o-matic.com/watch/cbineClXRI

The only thing I notice is you have so many media queries. Note that we can group media queries. No need to define media queries again and again. If you have a custom CSS that needs to be inside specific media queries, you can just add it to the existing. No need to add another media query.

#6

hi Lely

Thanks so much for your reply.

Yes, it took ages, but I finally got all of the errors eliminated from the CSS.

I see what you mean, so if I have anything that need to be controlled at 768px, I can have them all under each other in the same media query. Just separate by a comma, yes?

So there is no specific spot to place the queries though? I will read that link you supplied.

At times it is quite a task to find the correct class ID to use. It would be fantastic to have a resource that has them all. Your online resource has some, but nowhere enough. Some take ages to find correctly even using Inspect in Chrome. Just a single example was .single .form-submit #entry-comment-submit which took hours of experimenting to find exactly the right class.

Might I suggest a forum item where members could input class IDs they have discovered that would just build over time? It would be a really handy resource and save loads of time. So the class IDs would be listed and a brief explanation of exactly which area it controlled. Just a thought.

Thanks for your time, Lely

regards

#7

Hi There,

No, no need to separate comma. What I meant is something like this:

 @media (max-width:768px){
     .selector1{
          font-size: 16px;
          color:red;
      }
     .selector2{
          font-size: 18px;
          color: green;
      }
 }

See how the two selectors is in the same media query. Not comma separated. Just proper open and closing bracket.

Regarding that correct selector or class to use, that is a very broad topic to discuss. That includes the structure. Which box or div has which class and there are so many relationship between this structures to consider. After considering the structure relationship, we then have to take a look on how it is added for specificity. This link might help: https://medium.com/@dte/understanding-css-selector-specificity-a02238a02a59

#8

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