Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 11, 2017 at 8:18 am #819143
    clairemartindigital

    hello guys,

    how can i:

    1. increase the spacing between the icons
    2. change the mouseover from the solid background colours to have no background colours and instead have the icon turn black on hover?
    3. on mobile have the copyright text centered and the icons centered underneath

    many thanks

    July 11, 2017 at 9:21 am #819176
    Sarah

    Hey clairemartindigital,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to give accurate help :)

    Best regards,
    Sarah

    July 11, 2017 at 9:24 am #819177
    clairemartindigital

    ah yes of course. please see private content.

    http://imgur.com/a/GXQwlah yes, of course. see private content.

    July 11, 2017 at 2:12 pm #819350
    Victoria

    Hi clairemartindigital,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top #wrap_all #socket .av-social-link-facebook:hover a,
#top #wrap_all #socket .social_bookmarks li:hover a {
    color: #000;
    background-color: #fff;
}
#top #socket .social_bookmarks li {
	width: 40px;
}
@media only screen and (min-width: 450px) {
	#socket .social_bookmarks {
	    float: left;
	    margin: 0 25%;
    }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    July 11, 2017 at 11:42 pm #819711
    clairemartindigital

    Victoria,

    thanks. Regarding item 3 (on mobile have the copyright text centered and the icons centered underneath), your code didn’t change this at all. Instead your code moved the social media icons on mobile into the center which wasn’t the desired outcome. any other idea?

    July 12, 2017 at 12:34 pm #819963
    Victoria

    Hi clairemartindigital,

    I thought that’s what it say here
    “3. on mobile have the copyright text centered and the icons centered underneath”
    Could you please attach a mockup of what you’re trying to achieve?
    Also, please disable the caching plugin for me to be able to test css better.

    Best regards,
    Victoria

    July 12, 2017 at 1:14 pm #819986
    clairemartindigital

    Hi Victoria,

    yes, have the social media icons centered underneath the copyright text – also centered above. at the moment neither is centered on mobile. instead the social media icons are centered on desktop, which wasn’t the desired outcome.

    desired outcome on desktop and tablet: http://imgur.com/a/ElxVS

    desired outcome on mobile: http://imgur.com/a/3NpbR

    re cache, if you log into the site using details below, the cache will be disabled for logged in users.

    thanks so much for your help

    July 15, 2017 at 4:42 am #821534
    Ismael

    Hi,

    1.) For desktop, please remove the following css modifications.

    #socket .social_bookmarks {
    float: left;
    margin: 0 25%;
}

    2.) For mobile, use this.

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  #top #footer .widget_nav_menu li {
    display: block;
  }

  #top #socket .container {
    text-align: center;
  }

  #top #socket .social_bookmarks, #socket .copyright {
    float: none;
    display: block;
    margin: 0 auto;
  }

  #top #socket .social_bookmarks {
    text-align: center;
  }

  #top #socket .social_bookmarks li {
    float: none;
    display: inline-block;
  }
}

    Best regards,
    Ismael

    July 15, 2017 at 5:13 am #821544
    clairemartindigital

    Hi Ismael,

    as always, you do know your css.

    you can close this one.

    thx

    July 15, 2017 at 4:31 pm #821720
    Sarah

    We’re glad Ismael was able to help! :) Please let us know here in the forums if you need help with anything else.

    Thank you for using Enfold!

    Best regards,
    Sarah

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘footer socket social media icons’ is closed to new replies.