GitHub
By the way, despite your suggestion to file a bug on GitHub, it got closed as completed (which, effectively here is won’t fix). I agree with you that it is a compatibility problem because it shows differently in WebKit (Apple Safari) and Blink (Google Chrome, Edge, Opera, etc.) versus Gecko (Mozilla Firefox). Oh, well. I filed with the Mozilla Firefox side for “traditional” bugs and for web compatibility issues. I do not know whose “fault” it is. For all I know, everything here is against standards and Blink and WebKit just choose to do an aesthetically pleasing fix, or Ghost has stumbled upon some proprietary extension or behavior that is not present in W3C standards, CSS 3.0, HTML 5, or Mozilla Firefox. Again, I have no idea.
On the suggested code
The code you offered seems to have an effect once I have reduced the margin addition somewhat.
The volume slider still extended outside of the box—but not by as much. I think the margin I had yesterday of 64 pixels was too much for your suggested code to make an impact.
I played with the pixel number and that had an effect of reducing the overhang in an all-or-nothing manner. Below a threshold = no effect. Above a threshold = some effect.
It is live at the same URL. I played with the percentage, but anything less than 100% only changed the player when the window is very large and made a lot of empty space after the progress slider and the volume slider but no effect on the player card when the viewing window was smaller.
When I jacked up the pixel count in your code, Cathy, it only affected the title of the audio card and the width of the title text in small window mode and made the sliders leave too much white space within the card when in big window mode.
The code is live, and I am playing with it off and on.
Something I noticed
Even after the threshold has been hit and the volume slider still juts out beyond the bounds, adjusting the pixel count in your suggestion makes the screenshot tool built into Mozilla Firefox count a smaller box for the title text of the audio player and a smaller box for the volume slider. (When using Mozilla Firefox’s built in screen capture tool, you click and drag to make a box to get a custom part of the page; you can grab the whole visible page; you can grab the whole page (including the parts where you’d have to scroll to see them); or you can grab certain pieces of the page. If you click on a given object, then Firefox will give you the size of the region of that thing you clicked on.
Code
The code is currently thus, and it has no negative impacts on the look in big window mode. (Sort of a victory)
<style>
.kg-audio-card .kg-audio-player-container {
max-width: calc(100% - 92px)!important;
}
@media screen and (min-width: 640px) {
.gh-navigation-actions {
margin-left: 23px;
margin-right: 23px;
}
}
@media screen and (min-width: 640px) {
.gh-navigation-brand {
margin-left: 23px;
margin-right: 23px;
}
}
@media screen and (min-width: 640px) {
.gh-article-header {
margin-left: 13px;
margin-right: 13px;
}
}
:root {
--content-width: 720px;
}
.gh-article-image {
max-width: 720px;
grid-column:main;
}
.gh-content {
font-size: 20px;
}
@media screen and (min-width: 640px) {
.gh-content {
margin-left: 13px;
margin-right: 13px;
}
}
.gh-comments {
margin-left: 13px;
margin-right: 13px;
}
}
@media screen and (min-width: 640px) {
.gh-container {
margin-left: 23px;
margin-right: 23px;
}
}
@media screen and (min-width: 640px) {
.gh-footer-bar {
margin-left: 44px;
margin-right: 44px;
}
}
</style>
The total visible margin for all text and image elements on each page when in “small window mode” is for 43 pixels on the left and on the right.
Thank you
Thank you for your help. I am very low on money and have been out of work for several months. I know you work for $ as a freelance coder/developer on Ghost. I cannot properly hire you—only hope that the experimentation here is useful because it is on a live website that is not your own.
. . . And all of this may be for naught if Ghost 6.0 overhauls everything. I can only pray that the work here carries over since it is the current default theme (Source), which should (I hope) still be the standard for the near future.
Perhaps the best way for me to adjust left and right margins (the default is 20 pixels for some elements and 30 pixels for others) is in the theme files themselves, but unless I self-host, I can only modify CSS. It is useful, but it is “hacky.” I am not that surprised to run against this issue.
