Line Breaks In Blog Index & Posts

[guybower1]

hi

I know it is possible to have
in a blog index of post title, but is there any way to make it dependent on screen width?

Sometime you don’t want to decrease the title font beyond a certain point, but the title won’t wrap correctly.

Or is there a better way using and CSS to make the title either block or inline at certain screen widths?

URL for the blog page is feastthailand.com/blog, but it is more a question about the best way to achieve title wrapping whilst still keeping font size legible

Regards

[ruenel]

Hello There,

Thanks for writing in! Before you can apply block, inline-block or even style it to what you have in mind, you will have to consider the <br> tags first. When br tag exists, it will always create a line break. The best way to do it is to find a way to have a shorter title or make sure that the title is decent enough to be displayed in all screen sizes.

Hope this helps.

[guybower1]

Hi Rue

Thanks for your reply

Shorter post titles won’t be possible for some posts, unfortunately.

In the footer of my pages is an address which spans a number of lines. I have used <span>

to do it. Sorry, that was the word missing from the above question.

I just wasn’t sure a title would behave the same way, but will give it a try. A number of different classes that are triggered at different screen widths.

Regards

[friech]

Hi There,

You can use this custom CSS to resize the title on medium, small, and extra small screens

/*medium*/
@media (max-width: 979px) {
	.blog .entry-title, .single .entry-title {
		font-size: ##px;
	}
}
/*small*/
@media (max-width: 767px) {
	.blog .entry-title, .single .entry-title {
		font-size: ##px;
	}
}
/*extra-small*/
@media (max-width: 480px) {
	.blog .entry-title, .single .entry-title {
		font-size: ##px;
	}
}

Replace the ##px with actual value.

Sorry, I am not entirely certain about the wrapping issue. The title seems to be wrapping properly (https://prnt.sc/fr9mfi). If you’re planning to reduce the size of the long-titles so they can be on one line, you need a custom JavaScript for that.

Thanks,

[guybower1]

hi Lely

Thanks so much for your reply

I was actually referring to different class IDs to use the same CSS formatting, but yes, I do see many of my media queries are totally separate, yet many use the same screen width. I will make a list of them all and consolidate them into fewer queries. I’m sure that will be better for the site in the long run.

Class IDs is the most difficult thing I am finding about fine tuning my site. I can use Chrome Inspect easily enough, but sometimes the exact iD is not apparent and you need to experiment with a few to get it right. it is pretty time consuming.

cheers Lely

[lely]

Hi There,

You’re always welcome. Yes, clean CSS code will help you manage it better on the long run. Finding the correct ID and combination that will work best really takes time. It is case to case basis. Don’t worry, you’re not alone on that matter. Sometimes we struggle too.

Although, going back to this post, is this sorted out already? Please confirm.

[guybower1]

Hi Lely

Thanks again for your reply.

Yes all sorted using <span> and media queries

Regards

[nico]

Hi @guybower1,

Happy to hear that.

Feel free to ask us again.

Thanks.