First page has smaller images in #logoimg.
You don’t have any media queries for those images, so big one on the second page doesn’t allow page to shrink:
What do you mean? It is the same page. The only difference is the text and images. I must have made a mistake in the html for the pages not to respond as the screen narrows.
I expect that the problem now is that the image is wider than the space available- If that’s the case I will make smaller images, but is there a work-around?
I can´t understand the behaviour of the map. The image is 300px wide; it is wrapped in a div with a max-width of 300px; yet it expands to 400px as I narrow the screen.
Eventually it starts reducing but ignores left and side margins.
EDIT
Part of the problem seems to be at MQ 1020 but even if I reduce max-width to 300px it still oveflows at very low screen width
Delete the styles from the media queries that have anything to the image of the map and its containers.
Delete the rest of the code that has anyting to do with the image of the map and its containers.
Tabula rasa.
EDIT: If you want the small image of the map to display at a max-width of 400px, then create the small image with a width of 400px so it appears clear rather than blurry.
Those negative and collapsing margins affect every page that uses the newhtl.css stylesheet.
If you would like a visible benefit of fixing them (if having slightly better code isn’t sufficient motivation) note that you will reveal an additional 10px at the top of the “wow” image at the top of each page (those 10px are presently hidden from view).
Would you like an explanation along with the fix, or just the quick fix?
I tend to be methodical, so I would prefer to describe these boxes and suggest choices. Would you prefer to skip the “educational opportunity” and cut to the chase or are you willing to risk understanding how to enclose boxes within boxes? Do you keep notes to combat the CRS syndrome? I do… then I forget that I wrote them. Sometimes, being methodical is all I have.
What is your operating system and your primary/preferred browser? That question leads up to promoting the dev tools at your disposal. Obviously, you have seen that perfectly valid code (according to the Validator) can fail just as miserably as invalid code, so you need other tools and a better understanding of how HTML in concert with its CSS behaves. It IS a concert. The same CSS will not necessarily work on two pages IF the HTML is different (and it usually is). Thus the value of developing a coding strategy, and understanding targeting and specificity.
One aside thing I would like to know for my info only is what tool you use to write your code?
Laugh? That makes me want to weep. Do you at least download backup copies before you start work? I would never work on my live site like that. One small typo (which I’m very proficient at ) and the whole page could be scrambled.