How to center Hero

• 

  blueowlartblog · Member · Sep 20, 2017 at 5:47 pm

  • Copy link
  • Add topic to favorites

  I am creating this website:
  http://06c.cd1.myftpupload.com/

  I wish to center the text over the image. When I go to customize it says it’s part of the widget “hero.” I am also using the theme ‘Mins.”
  I can’t figure out how to get it centered, same with the page titles.

• 

  danrodcode · Member · Sep 20, 2017 at 6:15 pm

  • Copy link

  Hello, blueowlartblog, please try adding the following CSS property to the CSS file:

  .hero-inner {
  margin: 0 auto;
  text-align: center;
  }

• 

  blueowlartblog · Member · Sep 20, 2017 at 6:29 pm

  • Copy link

  Cool so that aligned the text but it is still on the right side of the page.

• 

  danrodcode · Member · Sep 20, 2017 at 6:50 pm

  • Copy link

  <Sorry, I didn’t notice it has a float property because I was not on my computer, Right above the .here-inner there is another CSS rule that starts like this: .hero .hero-inner, it has a Float: left; property assigned. Please remove the Float property from that rule and it should work just fine.

  example:
  .hero .hero-inner {
  width: 50%;
  float: left; ===========> Remove this line.
  padding: 4%;
  }

  Please let me know If this works.

• 

  thesacredpath · Member · Sep 20, 2017 at 8:12 pm

  • Copy link

  Hi @blueowlartblog, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org forums.

  The differences between WordPress.com and WordPress.org.

  I would suggest not editing the original CSS for the theme you are using. Either create a Child Theme, or easier yet, add the overriding CSS to the Additional CSS in the Customizer. For the second issue (left float), add this to the Additional CSS to override the original.

  .hero .hero-inner {
  float: none;
  }