All the images are saved to a size of 35K or less (except the sectional, which is about 120k). Here is the image css
img{
display: block;
margin-left: auto;
margin-right: auto;
max-width:600px;
padding-top: 20px;
}
I originally had the images larger, but one member complained because the lounge picture looks so bleak and he thought that limiting the size would make it less obvious. (I suppose I could overrule his objection. I'm VP now.) Didn't know there is a cross-browser problem with img. Could easily wrap the images in a div.
I really appreciate the comments. I've been retired for 4 years and totally out of practice and getting more out of date every day. I'm not at all familiar with @media.
I don't understand what you mean by 'bundle the image scaling up in the code that you use to scale the menus.' The menu is an unordered list:
li {
float: left;
}
li a {
color: white;
display: block;
padding: 0px 16px;
text-align: center;
text-decoration: none;
}
#siteMenu {
float: right;
width:45%;
padding-right: 15px;
text-align: right;
}
Will take all the comments about MS Word under advisement. I really thought all (most) substitute word processors can input a .doc. Just noticed this is a .docx. I can easily save it as a .doc. I don't know why your browser is trying to open the doc. I expected it to only download. How would I link it with a MIME type that browsers would not try to display?
Here is the code:
<button class="downloadButton"><a href="Downloads/N8338X Checklist.docx" download>Download N8338X Checklist</a></button>
BTW, the official, manufacturer-provided checklist is in the POH which is also made available as a PDF with a button on the same page.
As far as the target market: anybody with enough time and money to be able to afford the cost and time needed to fly, without wanting to have exclusive use of a plane. For the most part, that eliminates most of the younger people around here, but not all. Nevertheless, even our marketplace is addicted to their smart phones.
Thanks.
I wasn't saying that all the images had to be 800 in width. That was just a suggestion that will look okay on most desktop browsers, but can still be made small enough not to slow down a 3G or 4G connection too much. I usually use about 100k as the hard cutoff unless there are many pictures on a page, in which case I usually design it to use thumbnails. Unless users are on something like dialup or pre-3G mobile, that usually works out okay.
So in other words, you can use any size images you want (and optionally declare the dimensions in the img tags), and they'll display at their sizes as long as the viewport is wide enough for that to happen. If it's not, then the wider images will be scaled first (again, depending on the viewport width), and then the narrower images.
In other words, once the viewport narrows beyond the point that the narrowest image doesn't fit within the 90 percent constraint, all the images will render at the same width (90 percent of viewport width). That actually works out well on mobile screens.
Your image CSS shouldn't conflict with what I suggested as long as my suggestion comes after your code in the stylesheet and the images using it are inside a div referencing that style.
What I meant by bundling up the image scaling in the @media code was that if you were going to use @media to resize and rescale the menu based on the viewport to make it responsive, you could embed the responsive image CSS in that same @media section. So for example, if you were using something like
Code:
@media screen and (max-width: 783px) {
etc...
to define what happens to your menu when the viewport is less than 800 px (less 17 px for the scroll bar), you could also place the code for scaling the images in there.
In really simple terms, @media basically creates a subsection of the stylesheet that only comes into play when some condition is met, such as viewport size. So just for the sake of keeping things organized, code that only should be use when that "some condition" is met can all be stashed in there. But it's not worth bothering with just to scale your center images.
One common use of @media is responsive menus. Another is re-floating and scaling images. So, for example, you could have all your images aligned right with text wrapping around them in desktop, but scaling and centering without wrapped text in mobile screens. In that case, you might define the action as:
Code:
.pushimage-right {
float: right;
width: auto;
margin: 0 5px 0 10px;
}
To right-float the images on desktop, keeping all the images at the same actual dimensions (for example, 600 x 450) or adding more declarations to define the rendering size in desktop browsers. But later in the stylesheet you could use something along the lines of:
Code:
@media (max-width: 800px) {
.pushimage-right {
margin: 0 auto 0 auto;
float: none;
width: auto;
text-align: center;
}
.pushimage-right img { max-width: 98% }
}
to center them and remove the wrapped text on narrower viewports. The first part of the second snippet would do the centering, and the second part would do the scaling. It would also effectively remove the text by taking up 98 percent of the viewport width.
The HTML would look something like:
HTML:
<div class="pushimage-right">
<img src="path-to-image.jpg" alt="ALT text" />
</div>
Simple and clean.
There are other tricks that can be used to grab completely different images for mobile, but they're usually not worth the bother unless there are a huge number of images on a page. For a site like yours, the image bandwidth burden won't be high enough to bother with that, in my opinion.
Making responsive sites is a lot easier nowadays than when you retired. You can do almost anything with CSS and HTML5 these days, sometimes with the help of a bit of JS, but often without.
Rich
