I can’t understand why some images (only some) get blown up when the screen is reduced and media queries kicks in. You can see what happens in http://pintotours.net/Work/airportSyd.html (2nd and 4th images)
Also, font-color and other things changed dramatically.
You can see the published page in http://pintotours.net/Oceania/Australia/Sydney.html and pressing the button link for “What to Expect” on the right sidebar
Any help appreciated
Hi,
You have a umber of validation errors in your page which you should fix. The one with missing closing div is causing the colours to change.
You missed the closing div from .ad here:
<div class="ad">
<div class="img-container"> <img title="Sydney airport" alt="Sydney airport" src="http://pintotours.net/Oceania/images/airportSyd2.jpg" width="600" height="399"> </div>
</div>
That last closing div is missing in your page so all the styles cascade through to where they shouldn’t and result in blue centred text.
You are also doing thing like the following which is bad.
<p>
<div class="ad">
You can’t wrap a div in a p tag and although some doctypes will allow a p element to be unclosed browsers invariable get it wrong and wrap the div in a p and apply styles from the p element to the div. Therefore never do it. We have mentioned this to you a number of times now 
‘p’ element are for paragraphs and your page lacks any real structure as you mix plain text outside of p elements and use breaks to end paragraphs all of which is semantically incorrect and bad for business.
Have logical structures:
e.g.
<h3>Location</h3>
<p>Kingsford Smith airport, as it is officially known, is the only international airport serving Sydney. It is situated 5 miles south of the metropolis, next to Botany Bay. Two of the airport’s runways extend deep into the Bay, on reclaimed land. </p>
and never never like this:
<h3>Location</h3>
Kingsford Smith airport, as it is officially known, is the only international airport serving Sydney. It is situated 5 miles south of the metropolis, next to Botany Bay. Two of the airport’s runways extend deep into the Bay, on reclaimed land.
Don’t use breaks to end paragraphs or to make space and never use empty elements to make space either. Just add classes to the appropriate element and create the margin or padding that you need.
Regarding your images in http://pintotours.net/Work/airportSyd.html then you are using a technique usually reserved for videos to maintain an aspect ratio for the replaced element you are displaying.
Essentially the technique is used for videos to maintain a the 16:9 aspect ratio by using a padding to width ratio to create a block to hold the element. It can be used for images but usually you would have images that have the same aspect ratios to start with so that they don’t get stretched. In effect you don’t need that technique for images as you just set their width to 100% and their height to auto and they will maintain their aspect ratio automatically.
In your code you are creating an image container and then placing the image absolutely into place but then you’re letting the image maintain its own aspect ratio with auto height and therefore it blows out of the container that is holding it (because the image is now absolutely placed). This results in an image that has no relationship to the img container that you created and the image size will vary from image to image depending on its aspect ratio.
To compound issues further you are then placing a 100% wide image at left 18% which means it is now taking up 118% of available space which means it never actually fits in the container at all (and then you do the same with the top position).
To try and get things back on track you would need to use these rules for the images and their img-containers.
.img-container{
margin:0 auto 20px;
border:8px solid green;
border-radius:8px;
padding-top:50%;
width:73%;
}
.img-container img{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
border:none;
border-radius:0;
}
The only problem is that some images may get stretched or squashed if you are not using the same aspect ratio images all the time but they will all at least be the same size…
You may have been better off just setting the image to width:100% and height:auto and losing all the other trickery.
hi Paul
I’m embarrassed! I copied the file across to show you the problem and in the haste I forgot the fact that the img-container was a <div>…
the <p>s, well yes, with more than 200 files with improper code it is going to take a while
As for the img-container, this was, I thought, some code that you helped me with to get http://pintotours.net to fit into a mobile. I thought I could use the same code, but as my brain, especially, the memory part is failing me in my old age…
I have to go out right noe, but will see what the page is doing when I get back.
many thanks
It will work but with the caveats I mentioned. It will standardise the size of your images but unless all image aspects ratios are the same then some may be squashed or stretched slightly to fit. Of course this may be what you want 
Hi, I’m back
Now, before I insert that css code, ther is one little problem in that the stylesheet is used for dozens of other files with different sized iimages.
I guess the best is to put the code in the <head>.
Now, is this code for media queries or for the normal stylesheet?
Many thanks for your help
PS - There is something else I don’t understand: the page works well in full-size screens IF the line
<meta name="viewport" content="width=device-width, initial-scale=1.0"> but the images are all wrong when the meta-viweport is in the file. As the media query is for screens up to 500px ONLY, why should the full Desktop screen respond to it?
If this is just for one page then adding the code in the head is ok but if you have other pages then the external css file is best. I assume though that you don’t have the same class names and constructs in your external files so the code should not affect other images unless they are all inside .img-container.
The code should work for all images regardless of viewport size as that was the point of allowing them to shrink and grow as required.
You will need to give me an example as I am unclear about which images and which platforms you are referring to and whether this is the same problem with ‘fixed-width’ new windows that we ran into last time? It seems that mobiles don’t really understand new windows of a certain size and indeed as mentioned before this is not the best choice for desktop users most of the time. If you want the users to read something without going away then its probably best to open it in a modal like a lightbox but of course its usually best to simply navigate to the new page. Users hate popup windows and in most cases would simply prefer to navigate to a new page in the site.
Hi Paul
I’m afraid it’s getting late here and the brain is slow and unpredictable at this time (and others…)
If you look at the pages that I mentioned earlier, e.g. http://pintotours.net/Oceania/Australia/Sydney.html and click on “At the Airport” on the right sidebar, everything is fine, BUT it does not take up the full width of the mobile when there is no meta viewport… I copied that file elsewhere and added the meta viewport and some media queries and result is what you saw in
http://pintotours.net/Work/airportSyd.html. But when I look at the page in a full PC screen I still get all the wrongly sized images even if the meta queries are for devices up to 500px…
This business is driving me crazy!
Now, you may rmeember our earlier thread regarding the bug in Opera and how some of these pages with anchors failed to work. You worked out that the media queries were affecting the code even if we were taking about large PCs. The answer was to copy the stylesheet infoBigger.css (the same we are looking at now) to another infoProb.css and delete all the media queries. The pages, which are smilar to the airportSyd.html fill the screen from side to side and there is no need for media queries. Yet, these pages still do not feel the screen even when I used the copied infoProb.css!
To answer your point, I have at least another 20 files I would like to convert to mobiles but it is proving difficult! They all have different content and diffeent images, usually of different size. If I place the code you gave me in the common stylesheet, will it affect the images in the other pages?
I placed the code inside the html page and the resultts were the same for both large and smal screens!!! I’m leaving the code there for you to see in http://pintotours.net/Work/airportSyd.html
Many thanks
You are making this far harder than it needs to be
The css I gave you will work for all images and you do not need to put it inside media queries as it is a recipe for all widths.
In one page you have this in the head of the page:
@media (max-width: 600px) {
.img-container {
margin:0 auto 20px;
border:8px solid green;
border-radius:8px;
padding-top:50%;
width:73%;
}
.img-container img {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
border:none;
border-radius:0;
}
}
</style>
<link rel="stylesheet" href="/Pinto/infoBigger.css">
You have placed the media query before the main css file (infoBigger.css) which means that most likely all the rules form the media query will be over-written by whatever is inside infoBigger.css. Media queries follow the same cascade rules as any other rules. Just because the code is inside a media query doen;t mean it will ignore any same named rules that follow in the normal css.
e.g. if you say this:
@media screen and (max-width:500px) {
body{background:blue}
}
body{background:red}
The body will always be red no matter what the size of the display as you have over-ridden the blue value in the media query with the red that follows it. If you had instead said:
body{background:red}
@media screen and (max-width:500px) {
body{background:blue}
}
Now the body will be red except on screens smaller than 500px where it will be blue.
I suggest you remove all those .img-container and .img-container img rules from all your css and media queries and from any inline styles in the head of any page and simply replace them with the one block of code I gave you. That will get you back on an even keel and if you still then need to adjust for larger or smaller windows we can take it from there.
This is why you must be consistent and keep everything in the external css file so that everything is logical. If it is not logical then you are doing it wrong.
To be honest I feel you would be better off with a re-design and start from scratch or at least re-code the page using better more adaptable techniques. These ‘new windows’ are probably killing your site and should simply be links to other pages. Look at other travel sites (open and close the window) and you will see that none use this out dated ‘new window’ method. New windows were a mistake that happened last century and have long since been dropped (apart from perhaps a small login form or similar) but as a means of showing additional information they are a usability mistake.
Hi Paul
Why did they invent mobiles?..
I copied infoBigger.css into the same directory as test airportSyd.html, i.e. Pintotours.net/Work/airportSyd.html and placed the code you gave me into the new css file infoBigger2.css.
Look at what happened! All images disappeared, bar one that exploded into outerspace!
Thanks
You missed the position:relative from img container (probably my fault for not mentioning it but the code I gave you earlier was over-rides rather than the full code).
.img-container {
margin:0 auto 20px;
border:8px solid green;
border-radius:8px;
padding-top:50%;
width:73%;
position:relative;
}
You also have not removed the same rule from the media query.
@media screen and (max-width:500px) {
div.box {
width:100%;
padding: 5px 10px 5px 10px;
}
/*.img-container img {
top:3%;
left:16%;
border:5px solid green;
}*/
}
I’ve commented it out above but feel free to leave the border-width change in place but remove the top and left rules.
That should get us back on track and then further adjustments to the image will be easier (if required).
Hi Paul. Thanks
We are getting there!
However, there seems to be something strange still happening: teh images in Work/airportSyd.html (infobigger2.css) have different proportions to the originals in the popup from the Sydney page. The difference in code is that the latter is not connected to .img-container, like the former.
I messed around with the percentages in the code you gave me but nothing changes.
Sorry for going on…
PS - I’ve just realized that the code turns every image into the same size…
That is a problem, because apart from aestethic considerations, it also distorts images for which the licence was obtained on condition that the image is not distorted.
Is there another way round this?
Thanks
Paul
If you look at http://pintotours.net/Oceania/Australia/airportSyd.html ona large screen and narrow the page leftwards (like you taught me todo) the page which has nothing mentioning media queries goes into small screen mode, except for some of the images.
maybe the answer is to give these images indivudually some coaxing to behave like the rest…
Regards
PS - In fact it is reading the media queries even if there is no instruction in the <head>…
This is what I’ve been saying all along in all my recent posts. The technique you are using is to make all the images the same size. Read my other posts as I mentioned this a few times now and this technique only works when your images are created with the same aspect ratios to start with and then they will not appear stretched or squashed.
If you want images at their original dimensions then don’t use the aspect ratio technique and simply set a max-width on the image.
e.g.
.img-container {
margin:0 auto 20px;
border-radius:0;
border:none;
padding-top:0;
width:73%;/* adjust to suit*/
}
.img-container img {
position:static;
width:auto;
height:auto;
max-width:100%;
border-radius:8px;
border:8px solid green;
}
That will allow the images to appear at their natural size until there is no room for the image to fit and then it will scale smaller maintaining its aspect ratio.
I’m not sure what you mean as the media queries are inside your css here:
@media screen and (max-width:500px) {
div.box {
width:100%;
padding: 5px 10px 5px 10px;
}
.img {
top:3%;
left:16%;
border:5px solid green;
}
}
You don’t however have a viewport meta tag so mobile devices will assume the page is 980px and that media query will most likely not get triggered on mobile (desktops will obey the rule).
The viewport meta tag is the mechanism that tells mobiles not to scale the page but let it fill the natural device width - it is then your job to ensure content fits into that space. Without the meta tag mobile sites make the width 980px and only apply rules that meet that criteria and then scale the page smaller and smaller until it fits in the viewport.
Hi Paul
I’ve just read your post on max-width. Meanwhile I had found a way round by using zoom:55%; on the images that were too big. I used it on http://pintotours.net/Oceania/Australia/airportSyd.html
Which do you think would work best overall?
many thanks
Don’t do that as ‘zoom’ is not valid css and is only applied in IE and chrome. It is not really meant to be used like that anyway.
Just do what I have told you above.
You may also want to revise the media query for .box as you have set it to 100% width which along with its padding and borders makes it create a scrollbar on smaller screens (nothing can be bigger than 100% and still fit in the same container (unless you are using the border-box model)). Just set it to width:auto in the media query.
.box{width:auto}
You also have incredibly long unbroken text here:
see http://travelsecure.infrastructure.gov.au/international/onboard/prohibited_items.aspx1
That will cause a massive horizontal scrollbar on smaller windows and you need to force the text to wrap.
e.g.
.box{word-wrap:break-word}
Brilliant! It works fine narrowin the PC. As for mobiles, I have to wait for my daughter to come home. Mankind has managed to survive some 200,000 years without mobiles, so I don’t see why I should buy one…
Regarding th long text (url) thanks for the warning. i will create a simple link.
Paul, I have another problem in a new index page that I am testing (pretty much the same as the one you helped me with a few months ago). he main code has changed and I am at a loss how to get the image to appear properly in small devices.
If you have time, could you have a look at it? And should I start a new thread?
Thank you very much
Post the link here and explain what’s wrong and I;ll take a look later.
Hi Paul
The new test page is at http://pintotours.net/Work/NewPage.html
It is a close copy of the current one http://pintotours.net that you helped me with some time ago when I had problems with the Globe.
I had some help with the java script for the expanding text but in the process many other things were changed and now I have lost control of the main central section of the page.
Something strange is happening to the globe when you narrow the screen to mimic mobiles. I think this is due to the fact that that central part “middle”, is connected with the rest of the code and maybe even the script. Before, I had blocks which were easy to manage.
Many thanks
Ok, I see where you stole the image code from and on that page above the technique was used to create an aspect ratio pertinent to that image so that you can overlay the countries on top. You seem to have broken it all.
As a start add this media query back in at the end of the css file.
@media screen and (max-width:500px) {
#hundredpc {
position:static;
background:transparent;
}
#expansion #img-container {
margin:0 auto 20px;
border-radius:0;
border:none;
padding-top:73%;
width:auto;
position:relative;
}
#expansion #img-container img {
position:absolute;
width:100%;
height:100%;
border-radius:0;
border:none;
top:0;
left:0;
right:0;
bottom:0;
}
#expansion #middle {
height:auto
}
ul.countries {
top:-21px
}
}
I’m assuming that the element called #expansion is unique to this page othewise you will need to add a new class to prefix the rules,
It probably won’t be perfect but should be a start on the right track. That page could do with re-coding also because you are using fixed heights for columns and elements which is about the worst thing you can inflict on a web page (we have spoken about this before)