Centering Media Gallery

• 

  morgansophia · Member · Dec 7, 2014 at 9:34 pm

  • Copy link
  • Add topic to favorites

  Hello! I would like to use the circle media gallery on the homepage of my website, but it seems to be aligned to the left. Is there anyway I can align it in the center? Also, can I change the number of circles there are? Thank you!

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

• 

  alexjgustafson · Member · Dec 8, 2014 at 5:28 pm

  • Copy link

  Howdy!

  The gallery settings in WordPress don’t have an editable alignment property, so you’d normally need to adjust its position using CSS.

  Looking at your site, the gallery currently has a “middle” vertical alignment — this will align it centered within the post body, not necessarily centered on the page. Try changing your browser window to various sizes and see how the gallery reacts, you’ll see what I mean.

  So the simplest way to center it is probably to Edit your homepage and use the “Full Width, No Sidebar” template instead of the default template.

  Also, can I change the number of circles there are?

  That should be purely determined by the number of images in the gallery – fewer images, fewer circles. Also note that when you change the number of circles you get a different layout in a circle gallery:

  Example of Gallery with six images
  Example of Gallery with five images
  Example of Gallery with four images

  Let me know if you have more questions. :)

  Best,

  -Alex G.

• 

  morgansophia · Member · Dec 9, 2014 at 8:31 pm

  • Copy link

  Hello! Thank you so much for all your help! I changed the settings on the homepage, but it is still aligned to the left.

• 

  alexjgustafson · Member · Dec 10, 2014 at 3:40 pm

  • Copy link

  D’oh! I really thought that would fix it. Sorry. :(

  I loaded this up on a test site to take a better look, and now I see the issue is that when you create these thumbnail galleries, the gallery itself actually takes up the width of the page content. So using alignment to adjust the entire gallery isn’t really possible, because it will always take up the entire width. I suppose that’s where there aren’t alignment options built-in to the gallery.

  Even I’m learning something new here.

  We could center up the element “manually” with a little bit Custom CSS:

  .gallery-row{
  	margin: 130px;
  }

  However adding CSS like this does require our Premium plan upgrade:

  WordPress.com Premium [Redirects to Plans]

  Sorry I don’t have a free workaround in this case.

  Best,

  -Alex G.