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.

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

add alignfull image block caption rules to constrain caption width within main column #1773

Open
4 tasks
benlk opened this issue Aug 12, 2019 · 5 comments
Open
4 tasks
Labels
category: gutenberg Relating to general Gutenberg compatibility category: images Issues relating to images category: styles affects lots of styles, requiring visual testing Estimate: < 2 Hours good for beginners hacktoberfest help wanted

Comments

@benlk
Copy link
Collaborator

benlk commented Aug 12, 2019

Desired appearance:

Screen Shot 2019-08-12 at 15 11 14

Present-day:

Screen Shot 2019-08-12 at 15 11 34

the fix:

.wp-block-image.alignwide figcaption,
.wp-block-image.alignfull figcaption {
   max-width: (the column width);
   margin: 0 auto;
}

will require testing on posts and pages using:

  • one-column template
  • mstoday's custom template
  • two-column template
  • fullwidth template
@benlk benlk added category: gutenberg Relating to general Gutenberg compatibility category: images Issues relating to images category: styles affects lots of styles, requiring visual testing labels Aug 12, 2019
@benlk
Copy link
Collaborator Author

benlk commented Sep 3, 2019

Another screenshot from the reporting site, this time on mobile:

IMG_3907

@MirandaEcho
Copy link
Collaborator

@benlk benlk changed the title add alignfull/alignwide image block caption rules to constrain caption width within main column add alignfull image block caption rules to constrain caption width within main column Jan 8, 2020
@benlk
Copy link
Collaborator Author

benlk commented Jan 9, 2020

From discussion around #1843 and INN/umbrella-mstoday#54:

I would really like to just redo how Largo does the .entry-content and page layout, switching to CSS Grid or at least having the main column have a defined width that isn't made by whittling the viewport down with padding on both #page and .entry-content and sometimes other elements.

@benlk
Copy link
Collaborator Author

benlk commented Feb 6, 2020

As noted in INN/umbrella-ipbs#41, CSS Grid will not work until elements are able to automatically span rows in a column layout.

@benlk
Copy link
Collaborator Author

benlk commented Feb 6, 2020

In INN/umbrella-mstoday#54 we didn't do this because the Largo PR implementing this, #1843, quickly pivoted into Math Hell.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
category: gutenberg Relating to general Gutenberg compatibility category: images Issues relating to images category: styles affects lots of styles, requiring visual testing Estimate: < 2 Hours good for beginners hacktoberfest help wanted
Projects
None yet
Development

No branches or pull requests

2 participants