Center Site Description on mobile only

Hello,
Love the Sydney theme!
Is there a way to center the site description below the site title on mobile?
Currently, the site title is centered, but the site title is right justified.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
      .site-header .site-title,
      .site-header .site-description {
        text-align: center;
      }
    }

Regards,
Kharis

Thanks so much for the response!
For some reason, that didn’t work. The site title is still centered, but the site description (tagline) is still right justified on mobile.
Any other ideas?

Hello there,

Please share me a link to your site here, so I can get the exact code based on actual situation on your site.

Regards,
Kharis

Thank Kharis.

Thank you for sharing. Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-description {
      width: 500px; 
    }

    @media only screen and (min-width: 767px) {
      .site-description {
        width: 100%;
      }
    }

Regards,
Kharis

Strange. Still not working. Here is all the code I have in the Additional CSS regarding mobile:

@media only screen and (max-width: 767px) {
  .site-header .site-title,
  .site-header .site-description {
    text-align: center;
  }
}

.site-description {
  width: 500px; 
}

@media only screen and (min-width: 767px) {
  .site-description {
    width: 100%;
  }
}

The site description is still right justified on mobile only.

Replace min-width with max-width in this line:

  @media only screen and (min-width: 767px) {

So your code will look like this:

    @media only screen and (max-width: 767px) {
      .site-header .site-title,
      .site-header .site-description {
        text-align: center;
      }
    }

    .site-description {
      width: 500px; 
    }

    @media only screen and (max-width: 767px) {
      .site-description {
        width: 100%;
      }
    }

Regards,
Kharis

That worked! Thank you!

On a semi-related note, is there a way to have each word in the site description link to a page?

Hello there,

To accomplish it, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

      if( $('.site-header .site-description').length ) {

        var link1 = '<a href="https://www.angelaangelovic.com/save/">Save</a>';
        var link2 = '<a href="https://www.angelaangelovic.com/spend/">Spend</a>';
        var link3 = '<a href="https://www.angelaangelovic.com/simplify/">Simplify</a>';

        $('.site-header .site-description').html( link1 + ' / ' + link2 + ' / ' + link3 );

      }

    })(jQuery);
  1. Update
  2. Add this simple CSS code to Appearance > Customize > Additional CSS from dashboard.
    .site-header .site-description a {
      color: #fff;
    }

    .site-header .site-description a:hover {
      color: #fff000;
    }

Regards,
Kharis