This PR

master

Rebased to fix a conflict and screenshots added:

Master

This PR

@choldgraf any objection about this visual tweak?

I am definitely +1 on this PR, though in the link I can't get all three to line up since the buttons don't scale w/ the size of the page:

I think this problem is less-evident when there are 2 buttons rather than 3.

That said, it sounds like this issue is more one of dynamic scaling rather than one of adding in the binder button, so probably shouldn't be blocking on this PR, no? What do you think?

That said, it sounds like this issue is more one of dynamic scaling rather than one of adding in the binder button, so probably shouldn't be blocking on this PR, no? What do you think?

I am not an expert on web stuff but I think the behaviour when you adjust the screen size seems fine.

I guess I'm not making a value judgment on that behavior, just noting that on my 14" laptop screen (probably well within the expected browser sizes of our users) the above image is what comes up.

I guess I'm not making a value judgment on that behavior, just noting that on my 14" laptop screen (probably well within the expected browser sizes of our users) the above image is what comes up.

Interesting I can reduce the window to about half the size on my screen (14" laptop screen too) and still see the three buttons on the same row.

In any case I think that even in this case (three buttons not fitting on the screen width) having the three buttons on the same footing makes it look better than before.

huh, that is weird! well, either way I like the change, so I'll merge in later today unless other folks chime in w/ dissenting opinions!

• a 3 column layout switching to a 1 column layout when the width isn't large enough for three columns

makes sense to me. though I am unsure as to the magical CSS incantation to make this happen

You need the "@media" selector. I am in a meeting right now. Can't code.

hadn't seen that before, very cool!

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1

The question is: at what point does the strange stacking happen. I suppose this depends on a combination of resolution + width, but it's weird that @lesteve and I have the same size monitor but 2 different behaviors

Hmmm I can actually reproduce the behaviour from #329 (comment) on Chromium, so it looks like there is something fishy going on.

I want to add that we should use the https address for the binder badge. I have firefox57 and it does not load the image because the website is https(in github-pages and circle-ci), thus it blocks loading http resources.

Should this PR be blocked on the CSS three-column to one-column transition problem?

Also I agree we should use HTTPS for the badge...I'll open a PR for this, good spot @Titan-C

I arranged the download buttons and the binder badge vertically. I feel this is a lot simpler and more robust than trying to put them on the same row and making it work with media queries depending on the screen width (The sphinx read the docs theme already has some media query that decides to display the side-bar which further complicates matters. Other themes may have similar quirks as well).

This is how it looks:
.

I'm fine w/ this as well

@Titan-C and/or @GaelVaroquaux any objection to this one?

I'm fine with this. I actually prefer this stacking of the buttons, it really makes the layout more uniform. +1

OK three people agree, so I am going to merge this one. I guess this can always be modified with some custom CSS if needed.

In general, +1, though on wide screens it creates a bit of a waste of screen real estate.

The best design would be to have it floating on the side for wide pages, something like (in addition and separate from the other CSS instructions to sphx-glr-footer):

div.sphx-glr-footer @media only screen and (min-width: 100ex) {
    position: fixed;
    right: 10px;
    top: 80px;
    background: #f2f2f2;
    padding: 1ex;
    border: solid 1px #ccc;
}

I put the 100ex in as a ballpark estimate, maybe something larger is required to avoid overlap with text on too narrow screens. This can be tuned by seeing what happens when the window of the browser is resized.

The benefit is that it would make the binder and download buttons much more visible. Right now, my experience is that users often miss them.

Right now, my experience is that users often miss them.

I agree with this, a notebook-like example like this encourages users to copy and paste cell by cell from the HTML rather than go to the bottom of the page. This may lead to confusion as in scikit-learn/scikit-learn#10394, where the plt.show is right at the end of the example.

IMO it would be nice to put:

• either a link before the example than goes to the download section at the bottom
• the download buttons before the example. Probably this this takes too much space, so better suggestions welcome!