August 10

0 comments

Responsive Headline and Slogan in WordPress with an Artisteer Template

By Christopher G Mendla

August 10, 2018

Artisteer

Last Updated on January 19, 2020 by Christopher G Mendla

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)

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

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.

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.

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

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

Christopher G Mendla

About the author

A web developer living in Southampton, PA

Self motivated critical thinker and problem solver providing technology consulting services.

Leave a Reply

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

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}