How to Centre Heading on Mobile

Support
#1

How can I centre the “Holiday Gift Guides” heading on mobile at my site: diytravelhq.com

My other headings are centred. Thanks

#2

Hello Sheen,

Thanks for posting in!

The mentioned heading is a feature headline and it acts differently from a normal heading.
Do you want to display like this?

If that is the case, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@Media(max-width: 767px){
  .h-feature-headline span {
      text-align: center;
  }

  .h-feature-headline span i {
    position: relative;
    display: block;
    left: auto;
    margin-left: auto;
    margin-right: auto;
  }    
}

We would loved to know if this has work for you. Thank you.

#3

Yes I’d love that display.

I added the CSS in Cornerstone but it’s still displaying off-centre…

#4

Hello Sheena,

Please have the code updated:

@Media(max-width: 767px){
  .h-feature-headline span {
      text-align: center;
      padding: 0;
  }

  .h-feature-headline span i {
    position: relative;
    display: block;
    left: auto;
    margin-left: auto;
    margin-right: auto;
  }    
}

You may have installed a caching plugin like WP Rocket Loader. Please clear your plugin cache, clear your browser cache or use private browsing mode and test your site again.

Hope this helps. Kindly let us know.

#5

Yes that worked! Thanks again RueNel :slight_smile:

#6

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.