1. InGo Help Center
  2. Creating Promotional Materials

Changing the size of the Social Widget

Let's say your registration page has only 250px of space for the display of the widget. The social widget has a minimum default width of 270px.  If you put this widget into your page, it will bleed over the area provided and mess up your otherwise delightful registration page. What to do? Custom CSS:

  1. Create a file with the extension .css  Add the following content.  Adjust the pixels as desired. In this case, we're adjusting the pixel size of each attendee's picture to 60px from the default 65px, to make them fit the adjusted size of the parent container which is being adjusted from 270px down to 250px. Note that the !important attribute extensions are necessary in order to override default InGo styling.
    .ingo-social-widget .middle-whosin .users li img {
    	width:60px!important;
    	height:60px!important;
    	border-radius:50%!important
    }
    
    .ingo-social-widget.ingo-fluid {
    	width:100%!important;
    	min-width:250px!important
    }
    
  2. Upload this to either your own site or contact your InGo rep to have this css file uploaded to the InGo content delivery network. The css file needs to be publicly accessible.
  3. In the Admin console, edit the specific widget you're trying to resize, and edit the value entitled "Additonal CSS files". Add the URL to your css file there.
  4. Refresh your page. Ensure that your chagnes show up and the widget is resized as desired.

You may need to adjust the pixels iteratively to get it just right, but in the end your once delightful registration page has returned.

Enjoy!