Center .social-navigation across mobile devices in both orientations

• 

  jalexartis · Member · Mar 17, 2016 at 12:27 pm

  • Copy link
  • Add topic to favorites

  I want this to happen automatically.

  Padding-left a specific number of pixels, I have perfectly centered te Twenty Sixteen social media icons container on my iPhone & Windows phone, yet they are not centered on several online emulators in either portrait or landscape or both orientations.

  Can this be done with CSS that works for “all.”

  I have also tried “div.menu-social-links-container.”

  Again, TIA.

  James

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

• 

  carladoria · Member · Mar 17, 2016 at 4:59 pm

  • Copy link

  Hi there,
  I suggest you work with media queries for your CSS edits. Since if you only do specific settings for a size of device, it will vary to other devices and other orientations. You can find more information here: https://en.support.wordpress.com/custom-design/custom-css-media-queries/

• 

  jalexartis · Member · Mar 17, 2016 at 6:16 pm

  • Copy link

  Thank you for the reply. Exactly! I am using media queries; but, have not found the code that centers this container without padding for a specific device. that will require recoding as devices change.

  I researched extensively, including the link you provide, before asking. I ask last! Thesacredpath resolved a media query problem yesterday.

  My hope is a Happiness Engineer can at least tell me if what I want to do is feasible or not.

  I’ve done lots of CSS and help others. This is an issue I seek more help than you have given.

  James

• 

  thesacredpath · Member · Mar 18, 2016 at 1:10 am

  • Copy link

  James, there really isn’t a reliable way to detect devices, but you can structure the media queries using a max width that would cover the screen sizes of most mobile devices.

  What I would suggest is the following which will center the footer credits and the social icons on all screens/windows.

  .site-footer .social-navigation, div.menu-social-links-container {
      width: 100%;
  }
  .social-navigation li {
      float: none;
      display: inline-block;
  }
  .site-info {
      margin-left: auto;
      margin-right: auto;
  }

• 

  jalexartis · Member · Mar 18, 2016 at 8:54 am

  • Copy link

  Your coding does EXACTLY what I wanted for devices I have and emulators I have checked. It is amazing what a few simple lines of efficient code can accomplish.

  Thanks for your diligent work and willingness to resolve problems. I appreciate what you do!

  Your coding as I have entered it in my Custom CSS:

  .site-footer .social-navigation, div.menu-social-links-container {
  /* coding by thesacredpath, WordPress.com Happiness Engineer,
  to center the footer credits and the social icons on all
  screens/windows, 03/18 */
  width: 100%;
  }

  .social-navigation li {
  /* as above, coding by thesacredpath, 03/18 */
  float: none;
  display: inline-block;
  }

  .site-info {
  /* as above, coding by thesacredpath, 03/18 */
  margin-left: auto;
  margin-right: auto;
  }

  Color this support request resolved.

  The best…

  James

• 

  jalexartis · Member · Mar 18, 2016 at 10:43 am

  • Copy link

  Shout Out!