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

x/website: content getting collapsed into a single column #33017

Closed
seebs opened this issue Jul 9, 2019 · 13 comments
Closed

x/website: content getting collapsed into a single column #33017

seebs opened this issue Jul 9, 2019 · 13 comments
Labels
FrozenDueToAge NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one.
Milestone

Comments

@seebs
Copy link
Contributor

seebs commented Jul 9, 2019

What version of Go are you using (go version)?

N/A

Does this issue reproduce with the latest release?

N/A, but shows up on the website as of July 9, 2019

What did you do?

Go to golang.org.

What did you expect to see?

The contents of a web site.

What did you see instead?

A vast white field of nothingness.

Screenshot-2019-07-09-17:55:51

I am in favor of sites being accessible to small browsers, but it really feels like this is constraining its dimensions much more than it needs to. Note that the playground example is scrolling (it doesn't quite fit in the displayed area), even though I've got about 80% of my monitor blank here.

@gopherbot gopherbot added this to the Unreleased milestone Jul 9, 2019
@agnivade
Copy link
Contributor

You are getting the mobile view somehow. The playground and "Featured video" section should be on the right.

Please mention your browser version and your system details also.

@andybons @katiehockman

@agnivade agnivade changed the title x/website: if i wanted a 10" monitor, i'd be using a 10" monitor x/website: content getting collapsed into a single column Jul 10, 2019
@agnivade agnivade added the NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. label Jul 10, 2019
@mvdan
Copy link
Member

mvdan commented Jul 10, 2019

The top bar takes up twice the space, so perhaps some CSS is slightly broken and makes the site content not fit horizontally?

@seebs
Copy link
Contributor Author

seebs commented Jul 10, 2019

Recentish Firefox on Linux. I have font sizes set to not-default but that doesn't seem to matter. It does look like the individual containers are all set to a width of 430px, and are in a container of 831.3px or so. So it looks like they shouldn't fit side-by-side, and I'm not at all sure why the entire thing's being shoved into 830px on a ~1600px wide display.

Hmm:

.HomeSection {
    flex: 0 0 430px;

If I make that second number a bit smaller, suddenly I get two (tiny) columns.

So, looking further:

#page > .container,
.Header-nav,
.Footer {
  max-width: 59.38rem;
}

This seems to be what's producing the 831px width for the whole page. If I increase it a little bit, I do indeed get two columns -- but the columns are still really narrow. I'm not sure why the HomeContainer things are getting a size specified in px at all, let alone one so apparently small.

@mvdan
Copy link
Member

mvdan commented Jul 10, 2019

For what it's worth, I get two columns on Firefox 67.0.4 on Linux.

@seebs
Copy link
Contributor Author

seebs commented Jul 10, 2019

Update: My font default size is 14; if I increase it to 16, I get two columns, but the columns are still tiny.

So I think there's actually three different issues biting me here.

  1. The width of the overall container is computed in different units from the widths of the sub-containers. This causes erratic behavior.
  2. The widths of the sub-containers are in px, which are almost certainly the wrong unit -- they won't scale with font size, and large font sizes will make them even worse.
  3. The widths of the sub-containers just seem really tiny to begin with. I usually assume that 700px or so is the smallest thing that will be wide enough to read comfortably.

I'm not sure I want a two-column display; on the other hand, the contents of the columns are pretty tiny, so maybe that works for this. But it's about half the width of, say, this github comments thread, at least for me.

@JAicewizard

This comment has been minimized.

@andybons
Copy link
Member

If px are being used instead of rems then that's a bug. If you adjust the flex value to be

flex: 0 0 26.875rem

Using the dev tools does that help?

Also, what is the exact version (user agent string) of your browser? Thanks.

@seebs
Copy link
Contributor Author

seebs commented Jul 10, 2019

That does in fact get me the two (very narrow) columns.

Huh. So I went to look at the playground container:

.Playground-inputContainer {
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
  overflow: hidden;
  height: 10.63rem;
}

Well that explains why the input container is so short: It's specified explicitly as being so short, apparently? (But I'm not sure whether any of these style values might have been generated later by scripts as opposed to initially hardcoded.)

I'm not sure what height should be, but it seems like it would make sense to try to specify it in lines, or have it figure out its height from its content, or something?

I don't see a trivial way to find my user agent string, it's "Firefox Developer Edition 68.0b14 (64-bit)", running on Linux.

My default preference, for desktop browsing, would be to have the page use at least Most of the screen. It looks like around 115rem is the point at which increasing the width stops making the display wider, but since there's nothing outside the container, it's not as though I need margins for much.

@JAicewizard
Copy link

@seebs
Copy link
Contributor Author

seebs commented Jul 10, 2019

Cute!

Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

That is fascinating, and it is now really weird to me that it's not included in About.

@gopherbot
Copy link

Change https://golang.org/cl/185597 mentions this issue: content/static: update homepage column widths to use rem units

@andybons
Copy link
Member

The width of the columns on the homepage and height of the playground input are correct according to our designer's spec. We will take this feedback into account as we iterate more, but let's consider the primary issue closed (I'm redeploying golang.org now with the fix).

@seebs
Copy link
Contributor Author

seebs commented Jul 10, 2019

I concur. Thanks! It may not look like what I most want, but it now definitely looks the way it's intended to.

@golang golang locked and limited conversation to collaborators Jul 9, 2020
passionSeven added a commit to passionSeven/website that referenced this issue Oct 18, 2022
Using px was causing the sections to render in a single column
when the default font size was smaller than 16px.

Fixes golang/go#33017

Change-Id: I4b5ac91bd2811a9eca7c16dc1da68cfbf0314b4f
Reviewed-on: https://go-review.googlesource.com/c/website/+/185597
Reviewed-by: Katie Hockman <katie@golang.org>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
FrozenDueToAge NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one.
Projects
None yet
Development

No branches or pull requests

6 participants