Get the widget centered in my footarea

• 

  lucette63 · Member · Mar 18, 2016 at 11:47 am

  • Copy link
  • Add topic to favorites

  Hello guys,

  On my blog, I have 4 widgets at the bottom. I would like them to be centered (they are right now, on the left) .

  Here are the different CSS codes, I have been using : (maybe it is in this section that I have to delete a code)

  /* Change menu color on hover */
  #site-navigation a:hover, #site-navigation a:focus {
  color: gris;
  }

  #site-navigation #menu-item-21 a {
  color: #000000;
  font-size: 2rem;
  }

  .widget-area .widget {
  text-align: center;
  margin-top: -60px;
  }

  .sd-social-icon .sd-content ul li[class*=’share-‘] a, .sd-social-icon .sd-content ul li[class*=’share-‘] a:hover {
  padding: 10px;
  }

  .site-header, .is-scrolled .site-header, .home .site-header, .blog .site-header {
  background: rgba(255,216,217,0.5) none repeat scroll 0 0;
  }

  .sd-content a::before {
  font-size: 20px !important;
  }

  @media only screen and (min-width: 1110px) {
  div#content {
  padding-top: 70px !important;
  }
  }

  @media only screen and (min-width: 961px) and (max-width: 1109px) {
  div#content {
  padding-top: 100px !important;
  }
  }

  @media only screen and (min-width: 681px) {
  .widget-area .widget {
  float: none;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  transform: translate3d(0,0,0) !important;
  /* removing the animation for the search widget when it’s position changes */
  }
  }

  .widget-area.widgets-two .widget, .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .widget-area .widget, .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .widget-area.widgets-three .widget {
  width: 60%;
  /* This can be 100% as well but causes the search bar to be way too big on the home page. We can fine tune it depending on your needs. */
  margin: 0 auto;
  }

  .comments-area-wrapper {
  padding: 0 0 .1rem !important;
  /* 2rem and 0.5rem can be lowered further to reduce the space between the article and the comments area even more */
  }

  Can someone help me ? It will be very kind of you :)

  Thanks.

  Lucette.

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

• 

  carladoria · Member · Mar 18, 2016 at 9:10 pm

  • Copy link

  Hi there,
  Add this CSS:

  @media only screen and (min-width: 681px)
  .widget-area .widget {
  margin: auto;
  }

• 

  lucette63 · Member · Mar 21, 2016 at 5:56 pm

  • Copy link

  Hello Carladoria,

  I have copy paste your CSS codes, but no change appears.
  I think I must delete something from my CSS codes (the one I shared on the first message)

  Could you look at it ?

  thanks

• 

  carladoria · Member · Mar 21, 2016 at 7:22 pm

  • Copy link

  Hey,
  There are many changes in the code above, you should be able to overwrite everything with this:

  @media only screen and (min-width: 681px)
  .widget-area .widget {
  margin: auto !important;
  }