Social media icons and CSS question

Hello @charliemariephoto, I am glad you like our little plugin!

To your questions:

1/ Once you click on a desired social media icon, a new settings will appear – see image below:

2/ Not really sure, but you can try to insert following CSS code to CMP Settings > Custom CSS to shift all content to top:

.inner-content {
 justify-content: flex-start;
 -moz-justify-content: flex-start;
 -webkit-justify-content: flex-start;
}

3/ To make a logo bigger just insert following CSS code into CMP Settings > Custom CSS”

.logo img {
    max-width: 100%;
    max-height: 100%;
} 

or change the value of max-width and max-height to any desired values..it can be in pixels, percents, etc..

Hope it helps, Alex ??

Hi Alex,

Thanks for your quick response!

In terms of the social media thing – I think the issue is there are no icons showing for me to click on! Is that something you’d know how to fix?

Also, I’ve uploaded a gif with transparency for my logo, but on the mobile version it’s showing the container box. Do you know how to fix that?

The other two CSS options worked perfectly, thanks!

Charlie

Hello Charlie, can u share a link to your website so I can have a look on the logo and suggest you a CSS code?

Regarding the social media – it is a first time I hear it doesn`t work – very weird – what browser do you use? – Unfortunately it is not not easy to troubleshot as I would need to have access to your WordPress admin…

Alex

Yeah sure, link is https://www.tideandtree.com. It’s only showing the white box on mobile (and therefore possibly tablet devices). Desktops seem to be ok. I’ve tried both Safari and Chrome on my mobile.

It was the browser for the social media thing! Chrome wasn’t showing them, but Safari did so I’ve fixed that now. I’ve selected the bigger option version but is there any CSS to make them any bigger? I only have Instagram right now and want it to stand out!

Thanks ??

I am happy it worked in Safari – it is super weird though – as it works fine in Chrome for me!

Anyway, you can make an icon bigger by following css:

current container size:

.social-list a {
    height: 2em;
    width: 2em;
    line-height: 2em;
}

So you can change all values to 4em or 5em or as desired.
To change icon size change font-size to 2em or more as desired..

.social-list i {
    font-size: 1em;
    vertical-align: middle;
}

Regarding the logo, I checked on mobile and you are right, I believe it is caused by a GIF transparency issues – don`t you have transparent .png logo instead as it has better support in mobile browsers.

Alex

• This reply was modified 7 years, 7 months ago by NiteoThemes.

Ah the png fixed that problem! And I realised the issue with the social media on Chrome – I had an ad-blocker stopping it!

Thanks so much – great support! ??

Perfect!

Maybe one last thing – requested font families (Avenir Next Condensed) are not available on Google Fonts. So maybe you want change it to some different font which is on https://fonts.google.com/ ??

Good luck on Creative Market! ??

Ah thank you! Will do ??