Minimal-mistakes: Social networks disappear after resizing

[diegonc]

• [ ] This is a question about using the theme.
• [ ] This is a feature request.
• [ ] I have updated all gems with bundle update.
• [ ] I have tested locally with bundle exec jekyll build.
• [x] I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.

---

Environment informations

Whatever your site uses. I've tested it at https://mmistakes.github.io/minimal-mistakes/jekyll/gemified-theme-beta/

---

Expected behavior

I expect the social network links in the author sidebar to be visible after the resize.

Steps to reproduce the behavior

1. Resize the window until the author sidebar becomes a section before post content. Like, anything below 1024px.
2. Click the follow button to display the social networks menu
3. Click the follow button again to hide the menu without choosing a network. This step is important; if you leave the menu open the options will remain visible when proceeding to step 5.
4. Resize the window back to more than 1024px
5. Verify that the author sidebar no longer displays the social network links

[juanramirez]

Do you have AdBlock active for the page? It seems that AdBlock doesn't like the class name social-icons. I changed the name of the class to profile-links and they are now shown.

[mmistakes]

@juanramirez Think this is a legit bug. I don't have any AdBlockers installed and @diegonc's steps to reproduce work for me.

What's going on is when the "Follow" button is clicked jQuery is applying inline styles to display: none the author sidebar. Which is fine on mobile, but as soon as you scale the page up it still has display: none and therefore the content inside of it doesn't show.

I'll probably switch the trigger to apply a close class instead of using jQuery's fadeToggle, which gives me more flexibility to style and avoid disappearing content.

I don't think this is a huge bug as the only people likely to be bit by it are developers or those who like to mess with browser window sizes to test for responsiveness. The average user isn't going to view a page on mobile, hit the follow button twice, then magically scale up their screen to a desktop size :wink:

[JustinTullgren]

@juanramirez did you push that fix to this repo or just on your fork or personal branch? I am seeing the adblock issue and was hoping master had the fix.

[fsalmasri]

How to change the social icon size and how to change the list to be inline instead of lists ?

[mmistakes]

@fsalmasri Alter the CSS.

[fsalmasri]

I'm working on it. I can't find the exact place to change the icon style and the size in the css

[mmistakes]

@fsalmasri Change the height and width to what you want. This will make them much larger.

.author__urls.social-icons svg {
  height: 3em;
  width: 3em;
}