Same code? different results!

Hi

I’ve spent a couple of hours looking for the culprit without success!

One page works fine; two other with the same code are not responsive

The good one is http://pintotours.net/Asia/Japan/SapporoSusukino.html

The others

http://pintotours.net/Asia/Japan/IbisShinjuku.html

http://pintotours.net/Asia/Japan/IbisKyotoStation.html

Before I pull out my last hair, could you help me find the mistake, please?

They all validate, so, I’m lost!

http://pintotours.net/Asia/Japan/IbisShinjuku.html
http://pintotours.net/Asia/Japan/IbisKyotoStation.html

#logoimg {
    border: 1px solid blue;
    margin: 0 50px;
    padding: 10px;   /* add some value such as 10px */
}

Add {width:100%;} as show here:

<img style="padding-bottom: 20px; height: auto; width:100%;" alt="Accor Guarantee" src="/Pinto/Logos/AccorGuarantee.jpg">

Hi ronpat

Thanks but why does the code work in the first page? It responds properly as you narrow the page.
The css is the same.

I’m sorry, but I do not see the same HTML on the first page.

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:

<img src="/Pinto/Logos/AccorGuarantee.jpg" alt="Accor Guarantee" style="padding-bottom:20px;">

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.

media queries would be inappropriate. The image needs the width:100% set so it can narrow as needed in a fluid manner.

Hi megazoid

Right! That’s what it is then,

I will see what I can do. many thanks.

That explains ronpat’s first comment about the css which I did not understand

thank you both

Add 100% width, as ronpat has already said

Hi

That problem is sorted out, but I noticed a similar problem in the map.

I created a div “map” with the same code you gave me for the logoimg but it does not work…

I tried it in the http://pintotours.net/Asia/Japan/IbisShinjuku.html

EDIT

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?

Let me take a look…

Hi ronpat

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

 #content #box4 .img-container img {


margin:0 auto 7px;
margin-bottom:7px;
border:1px double #6495ED;
border-width:2px;
padding:2px;
max-width:400px;
}

I don’t understand anything! I placed at MQ 400 max-width 300px: yet it overflows at 300px.

It works up to 330px, and overflows even if both actual image and max-width are 300px.

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.

Hi ronpat

No, the image at the mom should be 300px.

I’m going out now and will have a go at your advice later on today

Thanks

Hi ronpat

I am now trying to follow your instructions in http://pintotours.net/Europe/Spain/MercureAlberta.html, which as far as I can see means deleting from the css

.map img{
height:auto;
width:100%;
max-width:300px;
margin:0 50px ;
}

However, it does not seem to make any difference, The map still overflows when it gets to 330px even if the mapm is only 300px wide.

What am I missing?

I lived up to my end of your bargain. Your turn.

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?

1 Like

Yes, the explanation might sink in eventually!

I see we have the same problem!

Don’t laugh! Mostly, directly in the cPanel, although for bigger josbs I’m starting to use Notepad++

My “normal” browser is IE9, but sinve a hard dik collapse I’m stuck with Windows8,1 and 10 and IE11.

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.

Yes, I do, daily! And when I am working on one page several times a day!

Besides, I work on copies in a TEST folder.

That much I have learned!

2 Likes

I’m ready whenever you are.

(hint: Centering things for small devices - #43 by ronpat)

1 Like