WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#28649 closed defect (bug) (fixed)

Twenty Fourteen: Featured Image covers post meta

Reported by: kraftbj Owned by: lancewillett
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.9
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: Cc:

Description

With a viewport of >846px, the following CSS is being used:

.full-width.singular .site-content .hentry.has-post-thumbnail, 
.full-width.home .site-content .hentry.has-post-thumbnail {
margin-top: -72px;
}

( https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentyfourteen/style.css#L3692 )

On the home page, this hides the post meta of a newer post above it.
Example (with Chrome's Inspect Element highlighting of the hidden tag-links span class):
https://cloudup.com/c73YI-T-vzR

The CSS is required for the singular pages and for the first post with a featured image to avoid any whitespace.

Suggestion: Replace .full-width.home .site-content .hentry.has-post-thumbnail with .full-width.home .site-content .hentry.has-post-thumbnail:first-child

Attachments (4)

28649.diff (513 bytes) - added by kraftbj 6 years ago.
Adds first-child
28649.2.diff (829 bytes) - added by kraftbj 6 years ago.
Adds first-child to both instances of CSS rule
28649.3.diff (1.3 KB) - added by obenland 6 years ago.
28649.4.diff (1.4 KB) - added by obenland 6 years ago.

Download all attachments as: .zip

Change History (12)

@kraftbj
6 years ago

Adds first-child

@kraftbj
6 years ago

Adds first-child to both instances of CSS rule

#1 @kraftbj
6 years ago

Revised patch since once removing the -72px margin, the next media query that applies adds -48px. This leaves the tags visible with little whitespace between them and the featured image.

first-child on both results in good whitespace between the end of the tags (thus the previous post) and the featured image of the next.

#2 @lancewillett
6 years ago

  • Keywords has-patch ui-feedback added
  • Milestone changed from Awaiting Review to 4.0

Thanks for the report, kraftbj. I'm going to ask Takashi to look at this, too.

#3 @Sheriziya
6 years ago

I hope it's okay I post this:
I've just tested this solution on my site http://fantasygamecreations.com/
For the tags being previously overlapped by the featured imaged from the previous post, it works like a charm! Thanks for the solution, Brandon :)

@obenland
6 years ago

#4 follow-up: @obenland
6 years ago

  • Keywords needs-testing added; ui-feedback removed

Introduced in r27117.

28649.3.diff combines selectors, includes the .ie8 selector, and makes it a bit more specific. See SergeyBiryukov's comment.

#5 in reply to: ↑ 4 ; follow-up: @SergeyBiryukov
6 years ago

Replying to obenland:

28649.3.diff combines selectors, includes the .ie8 selector, and makes it a bit more specific. See SergeyBiryukov's comment.

My comment was about this selector:

.ie8 .singular .hentry.has-post-thumbnail {
	margin-top: 0;
}

Should it be updated as well?

#6 in reply to: ↑ 5 @obenland
6 years ago

Replying to SergeyBiryukov:

My comment was about this selector:

.ie8 .singular .hentry.has-post-thumbnail {
	margin-top: 0;
}

Should it be updated as well?

Looks like I didn't read you comment carefully enough. I'll update the patch.

This ticket was mentioned in IRC in #wordpress-themes by obenland. View the logs.


6 years ago

@obenland
6 years ago

#8 @lancewillett
6 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 29101:

Twenty Fourteen: fix a display issue in screen sizes over 846 pixels where a post's featured image covers the post meta of the post above.

Props kraftbj and obenland, fixes #28649.

Note: See TracTickets for help on using tickets.