Help needed on mobile menu

Hi Ron,

How’s things coming along?

I typed a fairly lengthy list of changes over the past hour or so, and then realized that some changes were missing from the list, so… I will compare “before” and “after” copies of the stylesheets and rewrite my list. The Services page looks good on my desktop, so other than any personal preferences that you might have that I unknowingly trample, we should be good to go this evening…

EDIT.

Comparing the “before” to the “after” stylesheets is a non-starter. I reformat everything and the comparison program flags everything on the page. So…

I am attaching my HTML and the two CSS files as they are. You may have to rename the stylesheets and repath them as well as some of the the JS scripts in the HTML.

This doesn’t mean that the code in these files has the Goodhousekeeping seal of approval. There are still 17 !important modifiers in the responsive.css file alone. Although the number of validation errors on the Services page has been reduced from 56 to zero, there are boatloads of other opportunities for improvements if you have the urge to explore them. Every web page is a learning lab.

Services.zip (6.5 KB)

Cheers

Hi Ron, Thank you so much, that really looks good now. Most of the errors came with the template I used. No doubt I contributed some too as I am a self taught 70 year old. I do the web sites as a hobby. (and to keep the brain active) I still work full time running an apartment block here in Mooloolaba on the Australian east coast. www.84thespit.com That will give you a better idea of us.
Best regards,
Graeme

1 Like

You asked if future images will work without problems.

On the Services page, the images are displayed at a width of up to 250px in the narrowest viewport media query. That is the minimum required width of the actual image to avoid the blurriness associated with magnified images. You might be better off requiring a minimum width of, say, 300px for the actual images or some number greater than 250px that is evenly divisible by 4 whereas 250 is not.

Ideally, images should have an aspect ratio of 4:3 so they will appear to be the same height on the Services page. If the aspect ratio is different, the height of the image on the page will be different because the width will be the same as the other images and the odd aspect ratio of the unique image will be honored.

The images on the Projects page are all a fixed size so just make new images the same size.

If I understand you correctly, all images need to be made dvisable by 4. I note there is at least one image (without going thru the lot yet) that I noticed was only 200 wide, where most are 250. So are you saying I should try to make them all 200 (advisable by 4) or make them all bigger - 300?

I have just re-read your comments again and I think you want all the images bigger than 250 providing they divide by 4.

Yes, that is correct. The most important value is the width of the images. The width should be equal to or larger than the maximum width rendered in the browser. The rendered height will auto-adjust to retain the aspect ratio of the native image. Since most of your images are 4:3, then using a width value that is evenly divisible by 4 and wider than 250px seems prudent. In practice, it probably doesn’t matter, but just to reduce the chances of discrepancies in cross-browser math, it can’t hurt.

EDIT:

My intent is to predictably render the 4:3 aspect ratio of the images the same in all devices at all widths. I am NOT suggesting that ALL images must be 4:3. If you wish to use images with differing aspect ratios, that’s just fine as long as you understand that they will display at a height that is different from the 4:3 images.

Ok, I will start redoing the images on the Services page. I assume the size of 200x150 is ok in the html! Just change all the images up to 300 wide.

Yes, the main thing is to keep the aspect ratio so the images don’t show stretched, squashed or cropped.

Probably a poor idea to have very large images display smaller or vice versus. but as long as they are “close” they should be OK.

Large images displayed smaller can waste bandwidth.
Small images displayed larger can be pixelated.

Quality assessment requires an artistic eye that I don’t have, but I think those numbers should be fine.

It is best if the img width and height attributes reflect the actual dimensions of the images.

Do you have the original native images? What are their dimensions? I want to be sure that I have not misled you…

If the native dimensions of the “master” image are 200x150, nothing will be gained by enlarging them to 300x225 with a graphics program; they will become larger but they will become fuzzy, too - the same as they would if they were scaled larger than native size in a browser. The idea is to make 300x225 images from a larger “master” so the 300x225 images are sharp. Then the browser can scale them down and they will remain sharp.

If you do not have larger “master” images, then do not make any changes at all. The little bit of fuzziness that exists only does so in the mobile view and the max-width of that box can be reduced from 250px to ~200px easily if desired to prevent that bit of fuzziness. I recommended 250px because the width is available in the mobile view.

styles.css (line 379)

.one_fourth {
    width: 22.5%;
    max-width: 250px;   /* THIS property sets the max-width of the box with the image.  It exists here only.  It is not repeated or changed in responsive.css. */
    display: inline-block;
    vertical-align: top;
    border: 1px solid #bbb;
    box-shadow: 5px 5px 3px 0 rgba(194, 192, 194, 1);
    cursor: pointer;
    padding: 0 1%;
    margin: 0 1% 15px;
}
1 Like

Hi Ron,

I had “most” originals but not all. Have a look now and see what you think. I have uploaded another 12 images. 300x200 actually, but I think that is close or closer than was there as far as 4x3 goes. What you think?

Oh, wow! These look much better! The aspect ratio looks natural instead of a little cramped horizontally. Nice job!

I would make one tiny additional recommendation. If you look at the images carefully, a few look crisp around their edges but most look a tad fuzzy. That is because the “tad fuzzy” ones include a 1px border around the edge of the image. If the fuzzy looking edge is the “in thing”, then you are good to go. But, I would recommend that you not include the white border around the edge, if possible. This fuzziness is only slightly noticable on my PC monitor (low rez), but would probably be more noticable on a Mac’s high density monitor and most high-rez mobiles. Something to consider.

I hadn’t actually noticed that. If I had seen it in the photo program I would have removed it. Can you let me know the ones you think are fuzzy & I will relook into it. I know there were a couple that I had in actually increase slightly, albeit not from 250 to 300, but a little on a couple.

The following images have about a 1 or 2px feathered border around the edge
gardening-mini.jpg
bathroom-tiling-mini.jpg
kitchen-mini.jpg
fencing2.jpg
decking2.jpg

If you drop an image into an empty Firefox tab, the image appears against a black background. The white border is easy to spot.

This is a nit-picky issue so I wouldn’t lose any sleep over it especially if you have to sacrifice image quality by increasing the image larger than its native size to eliminate that border.

I see, 5 out of the 12. I will have another go.

Not sure I understand how to drop the image into an empty Firefox tab?

I’m getting the impression my old photo program is playing up. Some of those images are quite big and I even cropped just inside original before reducing to 300 and the outline appeared to be there.

Found the problem, I had clicked on the “soft edge” button somehow accidentally. So far I have redone the bathroom-tiling-mini.jpg and kitchen-mini.jpg. Do more tomorrow.

Click on the Plus symbol after the right-most tab to open an empty Firefox window in another tab.

Just drag and drop the images into that window one at a time.

Yep, that’ll do it. :smile: May I ask what image editor you use? Just curious. I use GIMP.

Do you have the Firebug plugin installed in Firefox? If you do not, may I recommend that you install it? For some of the most common checks, I find it easier to read than the built-in dev tools.