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

Responsive vw font sizes & query columns flex layout with em margins. Alternatives? #37330

Open
Andrew-Starr opened this issue Dec 13, 2021 · 9 comments
Open

Responsive vw font sizes & query columns flex layout with em margins. Alternatives? #37330

Andrew-Starr opened this issue Dec 13, 2021 · 9 comments
Labels
[Block] Query Loop Affects the Query Loop Block Browser Issues Issues or PRs that are related to browser specific problems CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Bug An existing feature does not function as intended

Comments

@Andrew-Starr
Copy link

What problem does this address?

In an attempt to provide responsive font sizes, I've noticed that using viewport width vw breaks the layout of the Query Loop columns in the Firefox browser.
Video here: #37295 (comment)

Examples of font sizes I have tried:

1.6vw

clamp( 1rem, 1.6vw, 1.5rem )

max( calc( 12px + 0.6vw ), 16px )

and many other variations each with a vw value, all break the query columns layout.

What is your proposed solution?

I don't have a definite solution.

Grid layout for the query loop?

Alternative to vw for providing responsive font sizes?

Would love to hear some alternative solutions.
@Andrew-Starr Andrew-Starr changed the title Question: vw font sizes & query columns flex layout with em margins. Alternatives? Responsive vw font sizes & query columns flex layout with em margins. Alternatives? Dec 13, 2021
@Andrew-Starr
Copy link
Author

I thought about defining a fixed font size for the Query Loop or Post Template, and then defining each inner block font size (Post Title, Excerpt, Post Author, Post Date etc) separately with the responsive global font size.

This would fix the layout breaking issue, but neither the Query Loop or Post Template blocks have typography support in the editor.

So how about wrapping the query in a Group block, and defining a fixed font size there? Well this also cannot be done because surprisingly the Group block also does not have typography support in the editor.

@aristath
Copy link
Member

Have you tried an approach like this? https://github.com/aristath/q/blob/7e034026b335fbd6659d1ad9413dad12313e7cc9/theme.json#L4-L56

@Andrew-Starr Andrew-Starr mentioned this issue Dec 14, 2021
Closed
@Andrew-Starr
Copy link
Author

That's really interesting, thank you.

It still breaks the layout in Firefox because of the one instance of 1vw which is fundamental to all of the font size slugs.

Replace the 1vw with something like e.g. 19px and the layout doesn't break, but then of course the font sizes stay fixed and don't respond/scale to the viewport.

@skorasaurus skorasaurus added the CSS Styling Related to editor and front end styles, CSS-specific issues. label Dec 14, 2021
@Andrew-Starr
Copy link
Author

Andrew-Starr commented Dec 14, 2021 •
edited
Loading

In case anyone wants to recreate the breaking layout, this is the very basic html page I created for testing with the same CSS that Gutenberg uses for the Query Loop.
You'll notice the font size is defined with vw to make it scale according to the viewport width.

Resize the viewport slowly and notice the breaking layout in the firefox browser.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>vw font scaling</title>
	<style type="text/css">
		body {
			background-color: #000;
			font-size: 1.6vw;
		}
		.container {
			max-width: 1280px;
			margin-left: auto;
			margin-right: auto;
		}
		ul {
			list-style: none;
			max-width: 100%;
			padding: 0;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
		li {
			background-color: #fff;
			width: calc(50% - .625em);
			margin-top: 0;
			margin-right: 1.25em;
			margin-bottom: 1.25em;
			margin-left: 0;
			clear: both;
		}
		li:nth-child(2n) {
			margin-right: 0;
		}
	</style>
</head>
<body>
	<div class="container">
		<ul>
			<li>This is column ONE</li>
			<li>This is column TWO</li>
			<li>This is column THREE</li>
			<li>This is column FOUR</li>
		</ul>
	</div>
</body>
</html>

Guess I'm going about this the wrong way in attempting to find a fix at the block level, when it maybe needs addressing in mozilla/firefox??

@Andrew-Starr
Copy link
Author

The issue does not appear with an odd number of columns, only even e.g. 2 or 4 columns.

The width of each post (2 columns) is defined like so: width: calc(50% - .625em)

If this is rounded up e.g. width: calc(50% - .63em) it fixes the issue and the actual on screen difference in each column is approx a tenth of a pixel narrower, which does not look noticeable to the human eye.

Would this be something that could be given consideration to be adjusted in Gutenberg?

@Andrew-Starr
Copy link
Author

Andrew-Starr commented Dec 14, 2021 •
edited
Loading

It would be tricky to round up the em value like in the previous example, so an alternative would be to simply take away another 0.1px from the calculated value in the relevant SCSS file.

This:

width: calc((100% / #{ $i }) - 1.25rem + (1.25rem / #{ $i }));

Could be changed to this:

width: calc((100% / #{ $i }) - 1.25rem + (1.25rem / #{ $i }) - .1px);

@Andrew-Starr
Copy link
Author

Another possibility would be to use grid layout for the query loop columns instead of flex.

For example:

.wp-block-post-template.columns-2 {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - .625em));
    grid-gap: 1.25em;
}

With grid layout, the width and spacing is taken care of by the parent <ul> container, and we don't need to specify a width and margin for the <li> posts, and no need for :nth-child pseudo-classes to "fix" the right margin of the last column in the row.

Also in testing I'm not seeing any layout conflicts with vw defined font sizes.

@skorasaurus skorasaurus added the [Block] Query Loop Affects the Query Loop Block label Jul 27, 2022
@jordesign
Copy link
Contributor

Hey @Andrew-Starr - looping back to this older issue - do you still see this present when testing in Firefox?

@jordesign jordesign added [Type] Bug An existing feature does not function as intended [Status] Needs More Info Follow-up required in order to be actionable. labels Sep 14, 2023
@Andrew-Starr
Copy link
Author

Hi @jordesign

The issue seems to be mostly fixed in the latest Firefox release.

Using the font size examples above no longer presents an issue in my testing.

Using font-size: clamp(0.825rem, 0.825rem + ((1vw - 0.48rem) * 0.458), 1.0625rem) (as in the upcoming TT4 theme) also does not present any issues.

However, something with a bit more of a mix of units such as font-size: clamp(15px, 0.938rem + ((1vw - 7.68px) * 0.24), 17px) does still have the issue.

@skorasaurus skorasaurus added Browser Issues Issues or PRs that are related to browser specific problems and removed [Status] Needs More Info Follow-up required in order to be actionable. labels Apr 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Block] Query Loop Affects the Query Loop Block Browser Issues Issues or PRs that are related to browser specific problems CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@aristath @skorasaurus @jordesign @Andrew-Starr