Social Icon format nightmare

net1994

Hello folks - I just added a social icon to my site. I used a social icon content block to my menu bar, at the bottom. However 3 issues:

1. The text doesn't match the text size that is in my menu bar.
2. For Instagram, it isn't using the actual existing icon, just a white outline of it. I couldn't find a way to insert/replace it for the real thing. I have downloaded the current icon as a png file.
3. On mobile devices, it's even worse. The text 'follow me on Instagram' shows up dead center on every page, not in the drop down menu bar.

Can any of you folks think of ways I can fix this, if even possible? See below examples

Here it is on my desktop homepage:

Here is on mobile (android):

Hikin' Mike

The text looked the same to me.
SmugMug uses fonts to display logos, like Instagram, not png.
I'm not seeing your social stuff on mobile.
You Social is centered on desktop.

net1994

Mike, Sorry I didn't mention that I just moved it to the bottom of my page, on the whole site-all pages. But I do want it to show in the menu bar if possible. I could only put the Instagram part at the bottom of the page. That's the only place it wouldn't break something else. But I'd like to make it stand out in my menu bar.

Hikin' Mike

You can put it were ever you'd like, just don't start moving it around. Hard to help you if you keep moving things around.

net1994

Good point. I just put it back to the original location. It still shows all the original problems listed above. If you can think of anything, I'm all ears. Thanks again Mike!

Hikin' Mike

This should "fix" most of your issues. Add this to your theme's custom CSS:

.sm-page-widget-sociallinks.sm-page-widget .sm-page-widget-header > h3 {font-size: 14px;}

@media screen and (max-width: 736px) {

  .sm-page-widget-sociallinks.sm-page-widget .sm-page-widget-header.sm-page-widget-header-center,
  .sm-page-widget-social-links, 
  .sm-page-widget-social-links.sm-flex-justify-center, 
  .sm-page-widget-social-links.sm-flex-justify-end {
    text-align: left !important;
  }

  .sm-flex-justify-center {
    -webkit-box-pack: left !important;
    -webkit-justify-content: left !important;
            justify-content: left !important;

  }

} 

net1994

Hmm... On the desktop it's fine now. But mobile it is still showing dead center on ever page, on top of any photos. Is it possible to add this to the bottom of all pages only on mobile? But then leave desktop as is?

Hikin' Mike

You changed your Instagram. It worked before you changed it.

net1994

I just put it back. Can you refresh on a mobile device now and you might see the update? I mean, the problem is still happening.

Hikin' Mike

I'm seeing your custom Instagram, not the standard IG icon. If this is what you want, that's fine, but if you keep moving the target, I can't help you.

net1994

Yes, sorry I'm not helping the cause. Even with the custom icon/text html block fine on desktop, its still stuck at the top of mobile browsers. Grrrr...

Hikin' Mike

@net1994 said:
Yes, sorry I'm not helping the cause. Even with the custom icon/text html block fine on desktop, its still stuck at the top of mobile browsers. Grrrr...

It's an easy fix, but I'm on my way out for a few hours.

net1994

@Hikin' Mike said:

@net1994 said:
Yes, sorry I'm not helping the cause. Even with the custom icon/text html block fine on desktop, its still stuck at the top of mobile browsers. Grrrr...

It's an easy fix, but I'm on my way out for a few hours.

Understood. When you get a chance if you could let me know your thoughts, I'd greatly appreciate it. And I won't move stuff around in the meantime to waste your time. Thanks.

Hikin' Mike

.

Hikin' Mike

Remove this:

@media screen and (max-width: 736px) {

  .sm-page-widget-sociallinks.sm-page-widget .sm-page-widget-header.sm-page-widget-header-center,
  .sm-page-widget-social-links, 
  .sm-page-widget-social-links.sm-flex-justify-center, 
  .sm-page-widget-social-links.sm-flex-justify-end {
    text-align: left !important;
  }

  .sm-flex-justify-center {
    -webkit-box-pack: left !important;
    -webkit-justify-content: left !important;
            justify-content: left !important;

  }

} 

Add this:

@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-layout .sm-page-layout-row .sm-page-layout-column .sm-page-widget-24492838 {
    width: 38.65%;
  }

}

net1994

That did it! Thanks Mike!
Is there a way to add the instragram icon/text into the drop down menu on mobile? Put it at the bottom of the 'Contact' link with a little bit of px padding in-between. That would be interesting to see.

Hikin' Mike

@net1994 said:
That did it! Thanks Mike!
Is there a way to add the instragram icon/text into the drop down menu on mobile? Put it at the bottom of the 'Contact' link with a little bit of px padding in-between. That would be interesting to see.

You can add a custom link in your menu for your Instagram, but no way to add the icon.

net1994

Okay, thanks. I'll think about what works, or not. Thanks again!