Thoughts, information and reflections about technology

Responsive Headline and Slogan in WordPress with an Artisteer Template

I was building a WordPress site where the headline and slogan were relatively long. At certain aspect ratios, the text overlapped the logo image in the header.

The solution was to add some custom CSS and to make use of the Artisteer responsive design.

This is the header for a wide screen. (>1500px)

Artisteer CSS 1

 

However, at certain screen resolutions, the text would overlap the logo. This is just plain ugly not to mention unacceptable

Artisteer CSS 2

 

The first step is to go into Artisteer

  1. Select the Header
  2. Choose Responsive View at the top right. This will show the default responsive points for hiding elements.

Note that as of my version of Artisteer, which is current as of August 2018, you can only hide or show elements, you cannot change font sizes.

 

Artisteer CSS 3

If you click on the Headline or, in this case, the slogan, you can choose to hide the element at certain screen sizes by selecting or unselecting the visibility. However, that still doesn’ t give us what we need.

Artisteer CSS 4

 

If you go to the home menu item in Artisteer, choose Options, then CSS Options. You can place custom CSS code here.

 

Artisteer CSS 5

 

This took a little bit of trial and error and is highly dependent on the amount of text in the Headline and Slogan. The code looks as follows:

 

@media (min-width:1500px) and (max-width:1555px) {
.art-headline, .art-headline a { font-size: 32px !important ; }
.art-slogan { font-size: 18px; }
}

@media (min-width:1450px) and (max-width:1499px) {
.art-headline, .art-headline a { font-size: 32px !important ; }
.art-slogan { font-size: 14px; }
}

@media (min-width:1300px) and (max-width:1449px) {
.art-headline, .art-headline a { font-size: 32px !important ; }
.art-slogan { font-size: 14px; }
}

@media (min-width:1199px) and (max-width:1299px) {
.art-headline, .art-headline a { font-size: 26px !important ; }
.art-slogan { font-size: 12px; }
}

@media (min-width:1100px) and (max-width:1198px) {
.art-headline, .art-headline a { font-size: 20px !important; }
.art-slogan { font-size: 9px;}
}

@media (min-width:1000px) and (max-width:1099px) {
.art-headline, .art-headline a { font-size: 12px !important; }
.art-slogan {display: none; }
}

@media (min-width:980px) and (max-width:999px) {
.art-headline, .art-headline a{display: none; }
.art-slogan {display: none; }
}

You can establish the granularity you want with the @media ranges. I had to use .art-headline, .art-headline a  instead of just .art-headline.

Notes

  1. Any mistakes in the CSS will cause the CSS to be ignored. You can use an online validator such as https://codebeautify.org/cssvalidate to check your CSS.
  2. The width ranges have to be in order and not overlap. If it isn’t working, double check your ranges for each @media statement.
  3. I’m not sure if the !important is necessary. I think that the .art-hearline a was what got the headline to be responsive.
  4. The Inspect mode in Chrome or Firefox is invaluable in getting this to work. I found that chrome gave a better indication of the width of the viewport as you changed it than FireFox. YMMV.
  5. In the last two blocks, the font size of the slogan would have to be so small it would be unreadable. I just chose to not display it.

If all goes well, you can now see the Fonts change as you resize the window. This was done for www.weikelsauto.com

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact me
Archives
Categories
Amazon Disclosure

We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.