Twenty Fourteen: Click on Continue Reading, and first line Covered

[Quantumstate]

Theme 2014 Many problems, but insert <!--more-->. Now on the home page it shows as "Continue reading →". Click on Continue reading, and it takes you to the rest of the content, but the first line is covered by the blog name banner!

For example, at ​http://quantum-sci.com/cacook/ go down to "Our Microbiome" and read the excerpt. Naturally you click Read more, but the punchline is covered up. ("Guess the cure?")

[lancewillett]

Hello Quantumstate! Welcome to WordPress core Trac.

Thanks for the report.

[Gwendydd]

I have looked into this, and I can reproduce it.

The anchor is a span with an ID that is the same as the post ID (in this case, #more-75). The solution is to add something along these lines to that span:

	.admin-bar.masthead-fixed #more-75 {
		display: block; 
		position: relative; 
		top: -52px; 
		visibility: hidden;
	}

The complication is that you need to add that CSS only to the ID that is in the current URL, so you'll probably need JavaScript to do this. I don't have the JS chops to do that off the top of my head, but I will continue to investigate.

[Quantumstate]

Thanks, but I don't know how to impliment that. It's a real annoyance as often key text is obscured and missed.

[Gwendydd]

Replying to Quantumstate:

Thanks, but I don't know how to impliment that. It's a real annoyance as often key text is obscured and missed.

I didn't expect you to know how to implement that. I was just leaving some notes about what I had discovered so that someone else could jump in and fix it. You're right that this is a problem, and needs to be fixed! Someone will take care of it.

[slobodanmanic]

It was simple using CSS only:

.masthead-fixed .entry-content span[id*="more-"] {
	display: block;
	padding-top: 40px;
	margin-top: -64px;
}

.admin-bar.masthead-fixed .entry-content span[id*="more-"] {
	padding-top: 72px;
	margin-top: -96px;
}

Not sure if I should add any comments to these selectors, but rest of Twenty Fourteen's CSS file doesn't have them.

24px difference is to offset bottom margin for paragraph that wraps #more-xxx <span> element. According to caniuse.com selectors should work with IE8+ and all other browsers, but I haven't tested with IE8.

[Quantumstate]

"Simple", the man says...

I've added these changes to my 2014 style.css, but I can't see as it's changed any. Still at least one line covered up by the header bar.

I don't understand the change so am reluctant to tweak it.

[Gwendydd]

Have you checked to see if you are viewing a cached version of the stylesheet? Try pressing control+shift+r to force your browser to download the latest stylesheet.

[Quantumstate]

Well, I'm seeing the fix in IE, but not in Firefox or Konqueror. Can someone please check my weblog and see what you see?

[slobodanmanic]

@Quantumstate by saying CSS fix was simple I didn't mean "this was so easy you should've done it yourself". Sorry if it sounded like that. I was working on a Javascript fix first, and compared to that CSS seems simple, at least to me.

[Quantumstate]

Understand slobodanmanic. I was just being ironic.

Thanks for all your work. I've seen alot of complaints about 2014 on IRC, but I think they all relate to styling issues which I've posted bugs on, and the gigantic article titles. Personally I've reduced the size of those titles, and made a number of other tweaks which I think make a very handsome blog. Just a few nits to pick.

[Quantumstate]

I give up. I tried.

[lancewillett]

Does anyone know if this type of behavior has been discussed at the core level (for any theme)? I looked for related tickets but didn't find any right away.

[helen]

We handle it for the toolbar on load, although not in-page.

[slobodanmanic]

Replying to lancewillett:

Does anyone know if this type of behavior has been discussed at the core level (for any theme)? I looked for related tickets but didn't find any right away.

Doesn't it have to be handled on theme level if themes have sticky header?

[karmatosed]

Has anyone got a patch for this as would be great to revive and get a fix if it is a solution? We have a comment code snippet but no actual patch.

[slobodanmanic]

Replying to karmatosed:

Has anyone got a patch for this as would be great to revive and get a fix if it is a solution? We have a comment code snippet but no actual patch.

I attached the patch when I added the comment code snippet.

[ianbelanger]

I first tested Twenty Fourteen to see if the problem still exists and it does. Then I attempted to test the current patch, however it no longer applies. So I added the suggested CSS to Twenty Fourteen's style.css and it does fix the issue in Firefox and Chrome, however this fix does not seem to work in any version of IE or Microsoft Edge. I'm currently working on a patch that will work in all browsers.

[ianbelanger]

Refreshes patch and removes .masthead-fixed class in order to work on all browsers

[ianbelanger]

28967.1.diff is a solution that should work on all browsers. It is basically the same as @slobodanmanic's previous patch, but I had to remove masthead-fixed from the CSS. masthead-fixed is added dynamically by jquery only after scrolling, when a header image is being used. So in some browsers it was not added as a body class soon enough to be targeted.

This solution has been tested in Chrome, Firefox, IE11 and Edge on a Windows machine. It would be great to get someone to test this on other OS's and browsers.

[andraganescu]

I have tested this and it does solve the problem.

[ianbelanger]

Punting to 5.3 milestone after some issues were found by @desrosj upon review

[ianbelanger]

Patch refresh to fix some issues and support new editor more tag options

[ianbelanger]

So I think that 28967.2.diff​ should finally fix this issue, but I need someone with a Mac to test on various browsers. There is one caveat however, there is no margin between the paragraphs wherever the Read More tag is placed.

I also had to add some top padding to .entry-content in order to account for the new feature that allows you to hide the excerpt on the full content page. Screenshots coming.

[ianbelanger]

Without top padding on .entry-content

[lgrev01]

I run the patch on my macbook, but it doesn't show the excerpt. Can't find the read more button.

[francina]

Tested on Mac OS Mojave
Chrome - Works
Safari - Works
Firefox - Works
Both with "Hide the excerpt on the full content page" flagged and unflagged.
Tested on 3 posts, with tag Read More in different places. After a 1 line Paragraph, a 3 lines Paragraph a 10 lines Paragraph.

The style of

p {
    margin-bottom: 24px;
}

doesn't seem to work though in the paragraph before the read more text once you go to the post.

[francina]

No margin-bottom in the <p> before the read more tag

[sabernhardt]

Adds spacing after Read More tag

[sabernhardt]

The refreshed patch includes a top margin for the non-heading element follows the Read More tag when using the block editor (headings already have a good margin). The classic editor Read More tag has a fixed height and floats, which adds height when at the end of a paragraph but not when it is in its own paragraph.

/* Block Editor adjustment */
.entry-content span[id^="more-"] + blockquote,
.entry-content span[id^="more-"] + div,
.entry-content span[id^="more-"] + figure,
.entry-content span[id^="more-"] + hr,
.entry-content span[id^="more-"] + ol,
.entry-content span[id^="more-"] + ul,
.entry-content span[id^="more-"] + p,
.entry-content span[id^="more-"] + pre {
	margin-top: 24px;
}

/* Classic Editor adjustment */
.entry-content p span[id^="more-"] {
	width: 1px;
	height: 24px;
	float: left;
}

The selector here is also switched to span[id^="more-"] to be a little extra specific (starts with "more-" instead of contains).

[davidbaumwald]

@ianbelanger How do you feel about the latest patch? Is this still realistic for 5.3?

[ianbelanger]

This looks good to me @davidbaumwald. Definitely fixes the issue with no side affects. Tagging for commit

[SergeyBiryukov]

In 46429:

Twenty Fourteen: Ensure the content after the Read More tag is visible and has the appropriate padding.

Props ianbelanger, sabernhardt, slobodanmanic, Quantumstate, Gwendydd, andraganescu, francina.
Fixes #28967.