Widget displays truncated

• 

  nilla2014 · Member · Jun 18, 2015 at 8:20 am

  • Copy link
  • Add topic to favorites

  My ‘Follow Nilla on Facebook’ widget truncates and hides the right-side. I’ve changed the CSS code for the columns, but can’t seem to get that extra padding on the right-side, any ideas?
  This is an example: http://imageearthblog.com/2015/06/17/the-mysterious-plain-of-jars-phonsavanh/#more-1963

  Code:
  .site-content {
  margin: 0 27.9% 0 0;
  }

  .site-main .widget-area {
  width: 26%;
  }

  Any help would be wonderful!
  Nilla

  The blog I need help with is: (visible only to logged in users)

• 

  ehtis · Staff · Jun 18, 2015 at 1:27 pm

  • Copy link

  Hello Nilla,

  Try this code. I couldn’t verify it in the CSS Customizer as your theme is quite different to the stock layout. It now displays fine in my Chrome but not exactly sure how it would appear in your customized layout:

  .widget-area .tagcloud, .widget-area .textwidget, .widget-area select, .widget-area .recentcommentsavatar, .widget-area #subscribe-blog, .widget-area .milestone-content, .widget-area .widgets-multi-column-grid, .widget-area .widgets-grid-layout, .widget-area #pd_top_rated_holder, .widget_gravatar p, .widget_image img, .widget_goodreads embed, .widget_goodreads img, .widget-grofile .grofile-thumbnail, .widget-grofile h4, .widget-grofile p, .widget-grofile ul, .widget_facebook_likebox iframe {
    margin-left: 11px !important;
    margin-right: 20px !important;
  }
  
  .widget-title span {
    display: block;
    padding: 6px 11px;
  }
  
  media="all"
  .widget-area ul {
    list-style: none;
    margin: 0 11px;
  }
  
  .site-content {
    margin: 0 29.9% 0 0;
  }
  
  .site-main .widget-area {
    width: 28%;
  }

• 

  ehtis · Staff · Jun 18, 2015 at 1:30 pm

  • Copy link

  Apologies, you need to remove media=”all” above the .widget-area. Edited code:

  .widget-area .tagcloud, .widget-area .textwidget, .widget-area select, .widget-area .recentcommentsavatar, .widget-area #subscribe-blog, .widget-area .milestone-content, .widget-area .widgets-multi-column-grid, .widget-area .widgets-grid-layout, .widget-area #pd_top_rated_holder, .widget_gravatar p, .widget_image img, .widget_goodreads embed, .widget_goodreads img, .widget-grofile .grofile-thumbnail, .widget-grofile h4, .widget-grofile p, .widget-grofile ul, .widget_facebook_likebox iframe {
    margin-left: 11px !important;
    margin-right: 20px !important;
  }
  
  .widget-title span {
    display: block;
    padding: 6px 11px;
  }
  
  .widget-area ul {
    list-style: none;
    margin: 0 11px;
  }
  
  .site-content {
    margin: 0 29.9% 0 0;
  }
  
  .site-main .widget-area {
    width: 28%;
  }

• 

  nilla2014 · Member · Jun 18, 2015 at 7:17 pm

  • Copy link

  Hi, thank so much for the code! I’ve used although it still displays truncated but not quite as bad. Is it possible to reduce the FB image with the column instead?
  Also, your code created the following extras, is this correct?

  .widget-area .tagcloud, .widget-area .textwidget, .widget-area select, .widget-area .recentcommentsavatar, .widget-area #subscribe-blog, .widget-area .milestone-content, .widget-area .widgets-multi-column-grid, .widget-area .widgets-grid-layout, .widget-area #pd_top_rated_holder, .widget_gravatar p, .widget_image img, .widget_goodreads embed, .widget_goodreads img, .widget-grofile .grofile-thumbnail, .widget-grofile h4, .widget-grofile p, .widget-grofile ul, .widget_facebook_likebox iframe {
  margin-left: 11px !important;
  margin-right: 20px !important;
  }

• 

  ehtis · Staff · Jun 19, 2015 at 1:32 pm

  • Copy link

  Hi again!

  The previous code was realigning both the content area as well as widgets including titles of all types of widgets and their content. Too much clutter and inefficient.

  I just thought of realigning the Facebook widget only. It’d be much simple. Here’s the code:

  .fb_iframe_widget {
    right: 20px;
  }

  You can experiment with right: 20px value to see how you like it best.

• 

  nilla2014 · Member · Jun 19, 2015 at 10:17 pm

  • Copy link

  Hi, thanks for your help! That code works much better but it doesn’t provide a margin on right or left. I’ve used:
  .fb_iframe_widget {
  right: 20px;
  left: -20px;
  }
  Is it possible to have a little padding (left and right) of the Facebook image?
  I have the following code for my thumbnails so there’s a margin. Can I use something like this code but with .fb_iframe_widget?

  .visual-thumbnail img {
  width: 90%;
  margin: 0 5%;
  }

• 

  ehtis · Staff · Jun 21, 2015 at 9:19 pm

  • Copy link

  To accommodate a margin on both sides, you will have to move the content section a bit to the left and increase width of the sidebar.

  /* Move content area to left */
  .site-content {
    margin: 0 29.4% 0 0;
  }
  
  /* Increase width of the sidebar or widget area */
  .site-main .widget-area {
    width: 27.9%;
  }
  
  /* Adjust Facebook widget for desired margin */
  .fb_iframe_widget {
    left: -12px;
  }

  Adjust to your liking. Happy editing! :)

• 

  nilla2014 · Member · Jun 22, 2015 at 1:36 pm

  • Copy link

  Thanks for your help again!
  As I wanted the content to stay the same width, I’ve only played around with the margin for the widget:
  .fb_iframe_widget {
  left: -17px;
  }

  It’s given me a fraction of padding, so I’m happy with that for the moment. Thanks again!