Center accordion buttons?

• 

  komakulshan · Member · Aug 9, 2016 at 1:51 am

  • Copy link
  • Add topic to favorites

  Is there a way to better center the accordion buttons on the page https://mountbakerclubsite.wordpress.com/calendar/? They are a bit to the left of dead center compared to the calendar and the footer.

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

• 

  hallluke · Member · Aug 9, 2016 at 9:49 am

  • Copy link

  If you change the line in your existing CSS to the following it should work:

  article.accordion section {
  	margin: 0 auto .5em;
  }

• 

  komakulshan · Member · Aug 11, 2016 at 6:11 pm

  • Copy link

  Thanks, hallluke, but it didn’t change the position. It is still a little off center. Here is the original code:

  article.accordion {
  display: block;
  width: 30em;
  padding: .5em .5em 1px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 5px;
  }

• 

  thesacredpath · Member · Aug 11, 2016 at 7:12 pm

  • Copy link

  Hi there, add left and right margin declarations to your #acc1… rule and set them to “auto” like this.

  #acc1, #acc2, #acc3, #acc4, #acc5, #acc6, #acc7 {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }

• 

  komakulshan · Member · Aug 11, 2016 at 7:26 pm

  • Copy link

  Thanks, but that didn’t seem to change the centering. The left and right justify to seem to work, but not a good centering. Curious

  Thanks again

  Steve

• 

  thesacredpath · Member · Aug 11, 2016 at 7:53 pm

  • Copy link

  Hi Steve, I just went into your Customizer and added the margin left/right auto to your custom CSS and the three buttons below the calendar are center aligned.

  Can you give it another try and then leave the code in so that I can take a look at it if it doesn’t work?

• 

  komakulshan · Member · Aug 11, 2016 at 8:02 pm

  • Copy link

  Thanks for your help. I don’t see any change from the original (even after deleting browser caches – Safari 9.1.2 ). This is what I see:

  https://dl.dropboxusercontent.com/u/610147/MBC%20Calendar%20Centered.tiff

  The accordion buttons are shifted just a bit to left of center.

  Thanks agin

• 

  hallluke · Member · Aug 11, 2016 at 8:20 pm

  • Copy link

  Adding the original CSS I posted still works for me. I’ve tested in FireFox and the same version of Safari as you use (via the dev tools). Can you add that code back in and save the changes, then I’ll take another look to see if it’s different when applied in your stylesheet.

• 

  komakulshan · Member · Aug 11, 2016 at 8:24 pm

  • Copy link

  Your code added and saved.

  Thanks

• 

  hallluke · Member · Aug 11, 2016 at 9:08 pm

  • Copy link

  I don’t see it saved in the custom CSS file your site is loading. Can you try copying it in again at the end of your existing styles:

  article.accordion section {
  	margin: 0 auto .5em;
  }

  Either that or just adjust your second rule so the middle value for the margin is auto.

• 

  komakulshan · Member · Aug 11, 2016 at 9:16 pm

  • Copy link

  Luke,

  I had given up and went back to the original code. With your message, I tried again and this time it worked! Not sure why, maybe I pasted it in the wrong place at first.

  Anyway, thanks bunches, you are both handsome and intelligent!

• 

  hallluke · Member · Aug 11, 2016 at 9:19 pm

  • Copy link

  That’s good to hear. It sounds like you posted it before your existing CSS rules and it was negated by one of the latter ones, don’t worry, it happens to all of us every once in a while!