Center social media icons

Hi,

The css should allow for responsiveness, meaning if you make further adjustments there should be no negative effect. Again, this is in theory, its really a case by case basis.

Best regards,
Jordan Shannon

Hi,

Were you able to figure this out? I see the social icons centred on the footer.

Let us know if you need any further assistance.

Best regards,
Vinay

Hi,

The Social icons are center aligned by default. however, it scales the entire width of the parent container.

If you like to set a custom width to the social icons and center align the elements please use the below CSS

/* Remove icon border */
#top .av-social-sharing-box .av-share-box ul li {    
    border-left-style: none;    
    display: inline-block;
    vertical-align: middle!important;
}

/* Icon style */
#top .av-social-sharing-box .av-share-link a {
   margin: 0 10px 0 0; 
   width: 50px!important;
   height: 50px!important;
   border-radius: 30px!important;
}

For more code snippets and styles please check https://kriesi.at/documentation/enfold/social-share-buttons/

Best regards,
Vinay

Hi kellyCraftMedia,

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

.html_header_transparency #top #av_section_1 .container {
    padding-top: 0;
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi,

Have you tried adding the css to the very top of quick css so that it runs first? Also be sure to clear the cache a few times over.

Best regards,
Jordan Shannon

Hi,

Sorry, previously I mentioned about social share icons. To align the Icon elements please double click the icon element and open the element options. Here you can align the icons to left, center or right as seen in the below screenshot:

Best regards,
Vinay

Hi kellyCraftMedia,

Best regards,
Victoria

Hi kellyCraftMedia,

Sorry, I did not see anywhere that you wanted them in a row.

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

 .avia_transform #av_section_1 .avia_start_delayed_animation.av_font_icon {
    width: 80px;
    float: left;
}

#av_section_1 .avia_textblock  p  {
  padding-left: 34vw;
} 

If you need further assistance please let us know.

Best regards,
Victoria

Hi kellyCraftMedia,

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

@media only screen and (max-width:1024px){
     .avia_transform #av_section_1 .avia_start_delayed_animation.av_font_icon {
        width: 50px;
        float: left;
    }

    #av_section_1 .avia_textblock  p  {
      padding-left: 37vw;
    } 
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi,

Have you added the code to the very top of quick css so it runs first and clear the cache a few times over.

Best regards,
Jordan Shannon

Hi kellyCraftMedia,

You can play with the values and work out the ones that work for you.

@media only screen and (max-width:1024px){
     .avia_transform #av_section_1 .avia_start_delayed_animation.av_font_icon {
        width: 50px;  <------- This one will increase space between icons
        float: left;
    }

    #av_section_1 .avia_textblock  p  {
      padding-left: 37vw; <---- this will adjsut padding for you from the left
    } 
}

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