Media Query for iPad Air

[Stribor45]

Ron when you using classes particularly this example…#post104 kazmic4.zip

<div class="tcell myfonts">
        <img src="images/fonts.png" alt="" width="605" height="281">
</div>

Where do you have this selector and declaration in your css. I seen class attribute used before but in your example it looks like you using 2 classes together…tcell is class and so is myfonts? If you point me to tutorial or what is that technique called when you using it like that so i can search it myself.

[ronpat]

Hi, Stribor45.

@Stribor45

<div class=“tcell myfonts”>

Where do you have this selector and declaration in your css.

That element and class combination does not exist in the CSS.

One of the benefits of classes is that they can be used more than once on a page which simplifies applying changes to all of those elements. As a bonus, more than one class can be used in a single element to add additional styles specific to that element.

In the CSS you will find the class .tcell that applies these table-cell properties to elements with class="tcell" within the main section of the page:

main .tcell {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
/*    outline:1px solid yellow;  /* TEST Outline */
}

You will also find a CSS class .myfonts that adds padding to the element with class="myfonts":

.myfonts {
    padding:1em .5em .5em;
}

These two classes are combined in the HTML to assign the table-cell styles and the padding to one particular element (NOTE the space between the classNames in the HTML).

<div class="tcell myfonts">

 
Conveniently, I also used the class “myfonts” to target the image within that containter without adding a class to that image.

.myfonts img {
    display: block;
    width:100%;
    max-width:605px;
    height:auto;
    margin:0 auto;
}

Assigning more than one class to elements is a very common practice.

 
Hypothetically, if you wanted to add a third style to this particular element that is not needed elsewhere, you can combine the classes in CSS like this (NOTE that there is no space between the classNames.),

.tcell.myfonts {...}

That will target the element that has both classes.

 
Tutorials and a post:

https://css-tricks.com/multiple-class-id-selectors/

http://css.maxdesign.com.au/selectutorial/selectors_class.htm

https://www.sitepoint.com/community/t/multiple-classes/41697

[Stribor45]

Thank you kindly…
Seems like this post is getting a lot of views