jekyll
jekyll copied to clipboard
programminghistorian
Issue 2592
I am adding a new element (Twitter icon + link) to our site footer. This is to help visitors to our website find our PH organisational social media profiles, e.g., https://twitter.com/proghist.
Closes #2592
Checklist
- [x] Assign yourself in the "Assignees" menu
- [ ] Assign at least one individual or team to "Reviewers"
- [ ] if the text needs to be translated, assign the relevant language team(s) as "Reviewers" and tag both the team as well as the managing edtor in your PR. Please follow the translation request guidelines when writing your PR description
- [x] Add the appropriate "Label"
- [x] Ensure the status checks pass
- [ ] Check the live preview of your PR on Netlify
- [x] If this PR closes an open issue, add the phrase
Closes #ISSUENUMBERto the description above
If you are having difficulty fixing build errors, first consult https://github.com/programminghistorian/jekyll/wiki/Making-Technical-Contributions carefully, especially "Common Build Errors". Then contact the technical team if you need further help.
Checking the Preview, I notice that the Twitter bird icon I've included using <i class='fa fa-twitter'></i> doesn't show up....
I wondered if the problem was that the icon isn't light-coloured, so I tried adding style="color: white" but it still doesn't display.
Colour doesn't appear to be specified on the others icons.
Is this coded within our style.css? I can't find where...
Do you happen to know, @jenniferisasi?
Hooray! I solved it! I replaced <i class="fa fa-twitter"></i> with <i class="fab fa-twitter"></i>.
I've had a look on 2 browsers (firefox & edge) and in both this pushes the new link and several others off the bottom of the screen. I think some tweaking is needed before this goes live.
Thank you, @acrymble. I should have thought about checking it on other browsers. It works well for me in Chrome.
I'll work on this again next week, because I am not working tomorrow (a swap for Monday, AGM day).
The links are pushed to the bottom depending of the size of the screen... or if you Zoom in or out. Hmm let me check the layout see if I can figure something out...
I bet is something to do with:
flex-wrap justify-content-around inside line 12 for the ISSNs
<div class="d-flex flex-wrap justify-content-around">
Thank you, @jenniferisasi. I've just been experimenting with re-sizing my browser window to be smaller and narrower. In Chrome, it looks as though the footer is responsive and the links are re-positioned, although the Netlify banner partially covers them in this screenshot.
Yes, that is exactly what happens (and how @acrymble saw the links at the bottom)... the flex-wrap property (CSS) is the one doing the responsive wrapping... it tells the links to stay around the ISSNs. I think it is OK to leave as is, no? because it changes per screen and that is its job (and if you check on a phone, all the links stay under the ISSNs)
Yes, I think the responsive wrapping seems to be working! I have just checked in Firefox, again experimenting with reducing the size of my browser window. Notice that the Lesson retirement policy, Translation concordance, and Follow us on Twitter links are all partially hidden by Netlify's banner in this screenshot.
What screen size is our site optimised for? (mine shown in this screenshot is 30 inch)
Sorry @anisa-hawes, somehow I missed your last question. I have no idea about the size...
Hello @ZoeLeBlanc. Are you able to advise on how the responsive wrapping on our website is handling this footer content? I'm happy to shelve the idea of adding our Twitter link to the footer if it causes problems in a lot of people's browsers...
Either way, I'll take a note to raise these two questions in our forthcoming conversations about users' experience and needs.
- What screen size our site is optimised for?
- How can visitors to our website find our social media profiles?
Hello @ZoeLeBlanc. Are you able to advise on how the responsive wrapping on our website is handling this footer content? I'm happy to shelve the idea of adding our Twitter link to the footer if it causes problems in a lot of people's browsers...
Either way, I'll take a note to raise these two questions in our forthcoming conversations about users' experience and needs.
- What screen size our site is optimised for?
- How can visitors to our website find our social media profiles?
Since I get the emails... on Q n2 do you mean PH social media profiles or editors' individual social media profiles?
Thank you, @jenniferisasi. I mean our PH organisational social media profiles, e.g., https://twitter.com/proghist.
I am closing this PR and associated Issue #2592, but adding the idea to a list of enhancements/user needs to address as part of a future project.