Change flickr widget layout

• 

  hendikaf · Member · Oct 27, 2012 at 4:47 pm

  • Copy link
  • Add topic to favorites

  I have added the flickr widget in my footer area on the oxygen. I want to have the thumbnails displayed on just one line, horizontally Instead of having them being displayed vertically, one under another.

  I have the custom CSS option and previously succeeded in doing it but the html code of the widget seems to have changed and my CSS code isn’t working anymore.
  The code I was using :
  .widget_flickr .flickr-size-thumbnail a {display: inline-block; float: rigth;}
  .widget_flickr .flickr-size-thumbnail img {display: block; float: rigth;}

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

• 

  designsimply · Member · Oct 28, 2012 at 3:10 pm

  • Copy link

  Note that you do have a typo in your CSS, it should be “right” not “rigth”, but even with that fixed it looks like Flickr may have made a change on their side that you need to adjust for.

  Try removing the flickr styles you have in your Appearance → Custom Design → CSS editor and add this instead:

  .widget_flickr #flickr_badge_uber_wrapper {
  	width: 100%;
  }
  .widget_flickr td a {
  	float: left;
  	padding-right: 1em;
  }
  .widget_flickr td br {
  	display: none;
  }

• 

  hendikaf · Member · Oct 30, 2012 at 1:55 pm

  • Copy link

  Thank you very much, it works! I’ve just adapted it a little to better fit with my page width.
  .widget_flickr #flickr_badge_uber_wrapper {
width: 100%;
}

  .widget_flickr td a {
  padding-right: 0;
  padding-left: 0;
  margin-left: 2em;
  font-size: 1.1em;
  }

  .widget_flickr td br {
  display: none;
  }