Site header still mis-behaves

The post heading says it all and I’ve tried everything to get a decent fit. The design looks OK for the moment but I can’t upload untill I get this looking right!

The design looks like this (1 device of 1200px used)

but the preview on all browsers on my Mac looks like this with the header not fitting correctly - i.e bottom is cropped off:

Any help appreciated

Roger B

Roger. You are previewing with Safari. How does it look when the site is uploaded. View in chrome and safari if you uploaded. I’m following this thread.

Thanks for your reply Bill, I’ve just uploaded it again and the results are the same as the preview. Have cleared all caches in all the browsers but no difference I’m afraid - I mostly use Microsoft Edge and Safari for previewing by the way. Please have a look here and give me your opinion https://www.boston-studios.co.uk

Screenshot 2022-01-06 at 19.30.19

Some of the image controls give strange results such as the stretch/fill, fixed in window and the image position i.e top/centre/bottom and left/centre/right justification.

Just noticed - try resizing the browser window!

The problem is a full width image has a fixed height but a variable width. Inevitably the image will need to stretch, because of the changing aspect ratio of the container box compared to what you see in Sparkle.

You can control what part will be visible somewhat, by pre-cropping the image to have the content you want visible in the top, center or bottom part of the image, then setting the alignment of the image to match that.

1 Like

Roger - Duncan is correct. I had trouble with this as well in the beginning. Im usually doing my own photography now and purposely shoot in a particular fashion to match Sparkle. That head image is terrific. As Duncan mentioned crop, zoom in if you want. Play a bit. You’ve got a full parallax version of the same picture lower in your page. Its a great site. Well done. excellent use of parallax.

Actually I just checked again with a desktop Mac and it looks like you’ve got it. (in Safari) Squeezed the browser down to phone version and looks just fine. Great that you’ve found the solution. Attached screen shot.

1 Like

Roger, think of it a bit like this. Sparkle is your pasteboard. It’s where you lay everything out and the board doesn’t change size. It’s static. And then you come along and look at that board through an overlayed window (browser window), but the browser window can change shape and size. You’re going to see variations of what’s below. If you stretch the browser window down as far as you can go, you will see more of your image below. Unfortunately, the internet is a very fluid beast. I spend half my life colour correcting, sharpening and getting things absolutely perfect on a £6K screen only to find out that someone is looking at my work on a £200 laptop whose screen is bright blue and low res. Not like the good old print days but it has many more advantages. Always a compromise! Good luck!

2 Likes

Hi Bill, I’d be most interested to learn if you shoot your photographs in any different way or use different settings to shoot for a header for instance so that I can improve my workflow.

I mostly shoot in RAW mode, use lightroom/Photoshop/Luminar AI, and others such as ‘Acorn’ to process and resize ready for use, then I use an app called ‘Squash’ (its a drag and drop app) to reduce the file size somewhat - I can often get a 75% or better size reduction!

Also thanks scoutdesign, every little piece of information helps!

Roger. I’ll PM you on photography so the thread doesn’t get too off track.
Best,
Bill

1 Like

Also Roger, check my question from some time ago.