Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make block-cover-image more responsive #6066

Closed
2 tasks
weavertheme opened this issue Apr 8, 2018 · 3 comments
Closed
2 tasks

Make block-cover-image more responsive #6066

weavertheme opened this issue Apr 8, 2018 · 3 comments
Labels
[Feature] Blocks Overall functionality of blocks [Feature] Media Anything that impacts the experience of managing media Good First Issue An issue that's suitable for someone looking to contribute for the first time [Type] Enhancement A suggestion for improvement.
Milestone
WordPress 5.0 RC

Comments

@weavertheme
Copy link

Issue Overview

Default wp-block-cover-image styling is not optimally responsive.

Steps to Reproduce (for bugs)

Expected Behavior

Current Behavior

Possible Solution

Change the default CSS to add:

.wp-block-cover-image {			/* make cover images display more responsively */
	background-position:	center center;
}

This works well, and looks significantly better when resizing browser.

Screenshots / Video

Related Issues and/or PRs

Todos

  • Tests
  • Documentation
@karmatosed
Copy link
Member

What exactly is the display issue you are experiencing right now on other devices?

@karmatosed karmatosed added the [Status] Needs More Info Follow-up required in order to be actionable. label Apr 18, 2018
@weavertheme
Copy link
Author

Compare the following screen shots:

  1. GB default cover-image styling in a wide browser
    default-wide

  2. GB default cover-image styling in a narrower browser window
    default-narrow

  3. using background-position: center center in a wide browser
    covdr-cover-wide

  4. cover-cover in a narrower window
    cover-cover-narrow

The look of the fixed bg image looks much better with center-center.

@danielbachhuber danielbachhuber added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks Good First Issue An issue that's suitable for someone looking to contribute for the first time and removed [Status] Needs More Info Follow-up required in order to be actionable. labels May 14, 2018
@danielbachhuber
Copy link
Member

This seems like a reasonable improvement to me if someone would like to submit a pull request for it.

@danielbachhuber danielbachhuber added the [Feature] Media Anything that impacts the experience of managing media label May 14, 2018
@vtrpldn vtrpldn mentioned this issue May 15, 2018
Merged
4 tasks
@ZebulanStanphill ZebulanStanphill mentioned this issue May 15, 2018
Closed
@danielbachhuber danielbachhuber added this to the WordPress 5.0 milestone May 18, 2018
karmatosed pushed a commit that referenced this issue May 20, 2018
Center background-position on block-cover-image (#6066) (#6760)
562c81f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Feature] Blocks Overall functionality of blocks [Feature] Media Anything that impacts the experience of managing media Good First Issue An issue that's suitable for someone looking to contribute for the first time [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
WordPress 5.0 RC
Development

No branches or pull requests
3 participants
@danielbachhuber @karmatosed @weavertheme