Media Query for iPad Air

HTML & CSS
63

Hi Ron,
This code…

  main .tcell {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
  }

Which is fine but shouldn’t this class have …

         .tcell myfonts {
              display: table-cell;
         }

Slider and fonts image should be next to each other on same row. Is there a reason why you didn’t assign table-cell to fonts image?

64

What happens when you change the HTML to fit that CSS?
(presumably this is what you mean)

    <main>
        <div class="tcell">
            <div class="sliderwrap">
                <div id="slider">
                    <div><img src="images/slide-1.jpg" alt="" width="550" height="370"></div>
                    <div><img src="images/slide-2.jpg" alt="" width="550" height="370"></div>
                    <div><img src="images/slide-3.jpg" alt="" width="550" height="370"></div>
                    <div><img src="images/slide-4.jpg" alt="" width="550" height="370"></div>
                </div>
            </div>
        </div>
        <img class="tcell myfonts" src="images/fonts.png" alt="" width="605" height="281">
    </main>

(If this is not what you mean, please post an example of the CSS with the HTML.)

An image is an empty element, it is not a container; therefore, it cannot behave like a .tcell.

Perhaps you have a different structure in mind.

65

Well this is what I am thinking…

    <div id="content">
     <div id="content-wrapper">
        <div id="slider-wrapper">
           <div id="slider">
              <div><img src="images/slide-1.jpg" /></div>
              <div><img src="images/slide-2.jpg" /></div>
              <div><img src="images/slide-3.jpg" /></div>
              <div><img src="images/slide-4.jpg" /></div>
           </div>
        </div>   
       
        <div id="myfonts">
           <img src="images/fonts.png" />
        </div>
     </div>
   </div>

and css something like this…

#content {
 width: 100%;
 display: 100%;
 }
  
 #content #content-wrapper {
  display: table;
  vertical-align: middle;
  text-align: center;
  outline: 1px solid yellow;
 }

 #slider-wrapper, #myfonts {
  display: table-cell;
  width: 50%;
  outline: 2px dotted white;
  }
66

I’m gonna quietly skip past my misinterpretation of your question
and blame my blooper on a caffeine deficit. Your example in post #63 is punctuated incorrectly and I assumed your intent incorrectly, too; thus the tangent.

main .tcell {...} applies {display:table-cell} to all elements with the class .tcell within the main element; therefore, <div class="tcell myfonts"> already has {display:table-cell} assigned and class myfonts assigned with additional styles. (an advantage of classes)

If you are using IDs, then combine the styles from the two classes like this…

#myfonts {
    display:table-cell;   /* from .tcell */
    text-align:center;   /* from .tcell */
    vertical-align:middle;   /* from .tcell */
    padding:1em .5em .5em;   /* from .myfonts */
}

and your HTML should be fine. Using IDs, you end up with a lot of duplicated properties which are awkward to maintain, or groups of comma-separated selectors. Neither is very efficient.

In post #65 #content is a block element and does not need a width assigned. Also, 100% is an invalid display value.

{vertical-align:middle} is not inherited and should be applied to the table-cells, not the table.

Because IDs are unique and heavier than uranium, stringing IDs is undesirable. Use #content-wrapper {} instead of #content #content-wrapper {}.

Finally, when I wrote my code, I gave the .tcell around the slider slightly less width that the .tcell around the myfonts image because the intrinsic widths of the slider and the image are different and I wanted them to begin scaling down at the same time.

1 Like
67

BTW…what tool do you use to measure browser width ? Say you shrink the browser window and you think…ok here I am gonna change some CSS…how do you measure it to a pixle?

68

I use the free version of a little utility called “Screen Calipers”
http://www.iconico.com/caliper/

1 Like
69

What browser do you use? Most modern ones have dev tools that do this.

70

Firefox

71

I use Firefox, but started using Firebug rather than the built-in dev tools. (I think Firebug preceeded FF’s built-in dev tools.) Looks like you can get a good how-to about FF’s dev tools here, including the dev version of FF…
https://developer.mozilla.org/en-US/docs/Tools

72

The Firefox built-in dev tools Inspector shows class attributes and width / height values

1 Like
73

It does - Firefox was the last of the five most popular browsers to build in developer tools and Firebug is closer to what the other browsers provide as built in tools.

1 Like
74

If all you are looking at is the screen size, using “Responsive Design View” will allow you to change the view size and see the size in pixels as you do. This can help identify break points.

1 Like
75

To make image responsive from your code all I see is

 width:100%;
 height:auto;

Is this all it takes? I looked at few online tutorials and it seems that’s all CSS needed for it

76

That css is typical for the img element, but it will generally have a containing element (figure or div) which is responsive, via width: auto (default for blocks), % width or flex. Then the image just fills it.
I tend to use max-width: 100% on the image, so it goes no larger than its native size, but will shrink within its responsive container if needed.

1 Like
77

Fundamentally, yes; but… achieving the desired result may depend on the context… the surrounding code. Within blocks, @SamA74’s example works fine. But the CSS for the resizing of an image within table-cells in Firefox is different (see my code).

For example (using the code that I sent):

Change

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

TO:

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

and try resizing the browser width.
  Oops! The .myfonts image no longer resizes within the table-cell in Firefox (Chrome is OK).

Next, keep the above modification and make some more changes:

main .tcell {
/*    display:table-cell; /* COMMENTED OUT */
    float:left;  /* ADD Me */
    width:52.5%;  /* ADD Me */
    text-align:center;
    vertical-align:middle;
    outline:1px solid yellow;  /* TEST Outline */
}

You will see that the widths scale nicely in FF now, but you have lost the ability to vertically center the .myfonts image without more code.

Flexbox would work and would be easier than floats, but the point is that context and browser may matter.

78

I am almost done :smile:)

I have…

footer {
  display: table;
  width: 100%;
  ....
}

Why cant I divide it into 4 equal parts like this…

 #first,#second,#third, #fourth {
       display: table-cell;
       width: 25%;
      .....
 }

As you can see from attached image I am ending up with 5 parts…

1352×185 61.2 KB

BTW…I can see your point now about .classes vs #ids that you mentioned at the beggining of this exercise…As soon as I am done I am going to change all ids to classes…Probably going to end up with less code

79

I think it’s a matter of personal preference, but it’s not like all Ids are evil.

They may not be needed for JavaScript now that there’s querySelector() and getElementById() isn’t the only way to target an element.

But I think when used sparingly they still come in handy for when you need the specificity.
IMHO much better to use an Id than to use !important

1 Like
80

If you want all columns in a table to be equal width, the easiest way is to add table-layout: fixed to the table container object.

footer {
  display: table;
  width: 100%;
  table-layout: fixed;
}
1 Like
81

I understand that part but I dont understand why …

 width: 25%;

Is dividing container into 5 parts

82

Do you have an updated link to the site so we can see the HTML as well as the CSS and the surrounding code?