Skip to main content

TERMINALFOUR (T4) Tip 5: hide-for-small-only

Intended Audience:

TERMINALFOUR WEB MAINTAINERS, END-USER MODERATORS, PRIMARY WEB COORDINATORS

TIP: Always check the existing page you plan to duplicate for special CSS classes attached to page elements. Special classes may disappear when you replace page elements such as pictures, but you should keep these CSS classes.

Explanation: Several places exists in T4 to determine what CSS classes are used to style pages and page elements. An example page is the secondary-two-column page. An example page element might be pictures inserted in the page layout.

The below is a screenshot of the Faculty Directory page. From the T4 editor, you will notice three places for viewing special CSS classes.

CSS-specialclasses

Keeping Special CSS Classes

In the above screenshot, I have selected a picture on the Faculty Directory page. ALL faculty pictures have a special class called “hide-for-small-only”.

CSS-specialclasses2

You can get a closer look by right clicking on the same faculty image and then select “Edit Media Attributes”. You should now see that a special CSS class called “hide-for-small-only” is listed in the “class” field. Make a copy of the text in the “class” field.

Say you want to replace the template Faculty photo with some of your own, You would click on the media gallery button and place a new photo. But, sometimes the special CSS class will disappear along with the template picture placeholder. Right click on the new photo you inserted and re-insert the special CSS class you copied above into the class field.

CSS-specialclasses3

If you preview the page and resize your browser window, you will immediately see the effect of the special CSS class “hide-for-small-only”. In small view, one image does not have the “hide-for-small-only” and one does. You can see the effect in the screenshot below:

CSS-specialclasses4

*NOTE: the specific class will be retained because it already exists as a part of the CSS template.