Hi Dave
Forget about the above. I see what you mean by <p>and </p>
I’m not sure what is wrong with line 67. The page that is being held aside while I tested this one is
OLDsightsStoDom.html and it validates correctly
PS - It is now back in place
Bear with me and ask questions later but in the head of your page you have some css for div.box inside a media query as follows:
@media screen and (max-width:550px) {
body {
width:300px;
background-color: #003200;
margin-left:-20px;
}
h4 h5 {
text-align:left;
float:left;
}
div.box {
border:solid 1px #CCCC66;
background-color:#F1F1D4;
width:280px;
height:auto;
margin-left:auto;
margin-right:auto;
border-width:5px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#text1 {
visibility:hidden;
}
#container {
etc....
For testing please change the width:280px to width:600px in the div.box that is inside the media query and then re-test with your link destinations.
e.g.
@media screen and (max-width:550px) {
body {
width:300px;
background-color: #003200;
margin-left:-20px;
}
h4 h5 {
text-align:left;
float:left;
}
div.box {
border:solid 1px #CCCC66;
background-color:#F1F1D4;
width:600px;
height:auto;
margin-left:auto;
margin-right:auto;
border-width:5px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#text1 {
visibility:hidden;
}
#container {
Let me know the results as there seems to be something odd going on here in opera 25.
1 Like
Hi Paul
It’s the middle of the night here, and I’m half asleep, but it looks as IT?S WORKING!!!
I’m starting to see your logic: the “popups” being narrow look at the media queries.
If I leave it like this will it work with mobiles? All of them?
And that brings me another problem: some of the other pages where I have the same problem in Opera have popups 900 px wide. If I chnge the media query to that, what’s going to happen to mobiles? I guess I will have to add a different range for that particualr div. box. Is that the answer?
I’ll look at it again in a couple of hours!
PS Now that I looked at infoBigger.css which is the css for the barcelona and Sydney pages where I have even bigger problens with Opera only, the div. box there is
@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;
}
}
But here I don’t have the same issue. The media query is for devices (pages) up to 550px wide and the div. box is a percentage (100%),
So, what is the problem here?
Well, sightsStoDom are now working fine in all browsers. My problem now is with the same sections “Major attractions” in the Barcelona and Sydney pages. These rely on a different css: infoBigger.css.
Strangely (as usual) they respond differently. Just now, when the anchors did not respond in the Barcelona all I had to do was to keep hitting the link and after 2/3 sometimes 4/5 times the page opened in the right place. Sydney was more troublesome with some anchors not responding even after trying 10 times.
Hi Paul
I tested the infoBigger.css without ALL the code relating to media queries and all pages work well.
As you are the expert on media queries (you helped me a while ago to get myhead round this business…) I wonder if you would be kind enough to tell me how I should amend the code to make it work not only in the main computers but also in mobiles.
many thanks
Ok, I thought that may have been the issue as I managed to troubleshoot it once opera25 started misbehaving for me and allowed me to debug the issue and was indeed related to the media query.
However, this is now where it starts to get complicated 
At the moment your media queries are doing almost nothing on mobile devices because you do not have the viewport meta tag in the page and therefore they assume the width of the page is 980px and then just shrink the page to fit. To make use of media queries properly the meta tag must be in the head exactly as shown in that link above.
The problem that follows is then that you need to use the media queries to re-arrange all the elements in your page so that they can fit in a 320px width window and also fit on larger devices as required. Usually these means going form 3 columns down to 2 columns and then down to one column for the smallest devices. There is no magic fix and you just have to code your way through one element at a time and adjust as necessary. The problem arises in that if you hadn’t planned for mobile from the start then you may have laid the page out in such a way as to make it awkward to adjust downwards for mobiles.
The other issue is that I’m not sure of the support of opening new windows on a mobile device as I don’t believe they have new windows as such and you probably just get a new page. For example your popup will open up a new page on the iphone but clicking the ‘close’ link you added will not close the window and indeed it becomes impossible to get back to the other page. You would need to link back to it otherwise the visitor is stranded. I don’t know how other devices will handle new windows but I guess there will be similar issues. To be honest as I mentioned before I always avoid new windows so haven’t delved into this issue on mobiles in any depth.
What I would suggest (assuming that you want to keep the new windows) is that you do nothing special for mobiles on the new windows you have and remove the media queries in the popup. The popup is only 600px wide so as long as you have no media queries and no meta tag on those popup pages then the device will scale to fit and the user can then zoom if the text is too small but seeing as the page was only 600px wide then it shouldn’t be too bad. I think that’s the best you can hope for with this new window approach. One of the reasons that a css/lightbox popup may have been a better idea or simply link to another page.
Make sure that there is a link back to the original page as the close window doesn’t seem to work on mobile in my brief tests and you can’t get back. Hopefully someone else with a mobile can confirm this.
Your main page though would benefit from media queries along with the viewport meta tag but would take quite a bit of work to convert especially if you are not familiar with the techniques. If you aren’t going to mobilise the site then remove the media queries and the meta tag and the device will shrink the display to fit resulting in a small page that the user has to zoom to read.
Hope that explains the issue you need to consider
1 Like
Hi Paul
You are not going to believe this but I must be the only one in the 21st century who does not use mobiles! I must wait for my daughter to come back tonight to try and see what is going on in hers.
From what I remember sorting a few things out a few months ago, I decided NOT to use media queries for tha main pages, and concentrate on the popups (especially the hotels that you can see by clicking on the “Look inside” buttons. And the index page pintotours.net
As for the “Major attractions” linked to infoBigger.css which are 900px wide, can I not get TWO media queries in the css to solve the current problem without affecting the small screen mobile versions?
many thanks
Hi again
From what I remember as I started and then moved to something else… I was sorting out the index page and the hotel pages. e.g http://pintotours.net/Europe/Spain/ArtsBcn.html where I have
in the
These pages link to infoBig.css, so I must not change the code. I will check tonight if the change we made yesterday affected the pages.
I will look also to see if so far I applied media queries to any of the pages that link to infoBigger.css. If I have not, then getting rid of the media queries code dfor the time being is obviously the solution.
----------
PS - Yes, I need the media queries on th infoBig,css, as it controls the hotel popups, I will check tonight if the change we made affected them. If it did, I guess I can always get a duplicate css file without the media queries for those where it does not matter.
Yes, it is getting complicated! Why did they invent mobiles???
Are we talking about 900px width popups? I wasn’t sure to where you were referring.
If you are worried about the 900px popups showing too small on mobile then it may be worth trying coding the css without using any specific widths on those pages. Your width is already controlled by the width of the popup window you are enforcing so there doesn’t need to be any widths. That will allow you not to have to put any media queries on that popup page but you will need the meta viewport tag in the head though otherwise as I mentioned the page just gets scaled to fit.
Any large images should have a max-width of 100% applied and height auto (in the css) to allow then to scale smaller.
Of course it may not work as the new windows seem to be causing smaller devices a lot of pain.
1 Like
Hi Paul
Without a mobile for another couple of hours I do not know how these pages are showimg in mobiles. You could have a look at two of them from within the main page: http://pintotours.net/Europe/Spain/Barcelona.html.
If you click on “look Inside” of any of the top 6 hotels, and also the “Eating” in the left sidebar, they were adapted for small devices. The first through infoBig.css (the one we changed yesterday); the other through infoBigger.css (which I have left as before for the time being)
I would be grateful if you could check the hotels, which is what’s worryying me now.
RE:pintotours: The new window that opens when you click “look Inside” on the hotels seems to be working OK on the iphone and returns to the main page when you click close. The content is aligned in one column in the popup window.
The main page though is as expected and just a scaled down version of the desktop site and you need to zoom to read it.
1 Like
Hi Paul
I’ve just checked the pages in my daughter’s phone (android) and her iPod (iOs6). A few months ago I started changing things around in the Barcelona page, so that the hotel pages showed the images one by one vertically. They were controlled by the media queries as they were yesterday. After putting the code back to 280px I can now see things (more or less) correct in her mobile Alcatel (400x800) with Android OS, v4.2 (Jelly Bean), and her iPod 4th Generation.
After trying a bit and clearing cache the phone seems ok for the hotels (down to the Hiltons; I have not done the others), but in the iPod some of the text that is under the three panels came up to the right side of the panels. I think it has to do with clearing cache which we are not able to work out!
I am glad that you can also get positive results with your iPhone.
I would be grateful if you could look at the first hotel, the Crowne Plaza. At the bottom the Guarantee comes out and I have been looking at the code and can’t quite understand how to make the image shrink with the reducing of the width.
I have been trying to do what you taught me about dimishing the page http://pintotours.net/Europe/Spain/ArtsBcn.html to see how the content changes when it gets to the 550px target but it does not do anything…
Going back to the original problem, once I get these popups working on the small screens, I will replicate the css for the “sights” and use a different css to resolve the problem
You’ve been great help and I am amazed how you managed to suss out the problem.
Many thanks
Hi
I’ve just beeb copying .ccs files only to realize that it is not going to solve anything! I suppose it is possible for a page to look at 1 css for the large screens and at another for the small ones. Is it? Of course, that’s where the media queries should hav ecome in, but as we saw in my site they cerate problems.
Have a look now at sightsStoDom.html It is ok again with Opera/Chrome in big screen but on small screens it is very narrow…
Any ideas?
You’d do it like this:
.box .guarantee img{max-width:100%;height:auto;padding-left:0}
1 Like
Hi
I’m so tired, I’ve been making all sorts of mistakes and nearly lost half the site! Fortunately, I could back up. I think that I have to give up on the media queries and have two stylesheets to control the small popups in mobiles.
<link rel="stylesheet" media="screen and (min-device-width: 550px)" href="infoBig2.css" />
and move all the code that’s below the media queries into the main part of the infoBig2.css
What I’m uncertain about is the width I should give. The popups from infoBig.css are 600px wide, so maybe I should make it 550px. Does that make sense?
As for the code you just sent me, I take it that it should go below the media queries in the css. Right?
I need a good night sleep. Right now, nothing makes sense anymore!
many thanks
The code I gave you can go in the main css file as it is suitable for all devices.
That will target devices bigger than 550px. Is that what you wanted?
You don’t really want to target devices (min-device-width) at all you want to target viewport width (min-width) as device-width and viewport width are not the same things. You are just making it harder than it needs to be by trying to find devices.
For your popups you don’t really need any widths at all as the popup window is framing the content so just let it be fluid and adapt to larger or smaller as required. Code it fluidly and you probably won’t need any media queries for those small pages. Just use margins to make a bit of room where needed and to push things around. You should also tidy up all the errors in the code as already mentioned as anyone could trip up a browser.
Don’t try to fix everything in one go but just concentrate on one thing at a time and make sure that’s working before moving n to the next.
The opera25 issues may be insurmountable because I believe that it is a bug with the browser and opening a new window as I have noticed that on an independent page I created with lorem ipsum text and no css at all that opera still occasionally gets the link destinations incorrect.
Some times is better to take a step back and sleep on it
1 Like
Good morning
After a good night’s sleep I am still vey confused… but not so pannicky!
These problems only affect Opera and Chrome and, yes, it seems as if it is a bug in their rendering engine. I have reported it and will do it again today adding the information about the possible cause, which you were able to uncover.
My problems are only with the “sights” and of these the worst are in Barcelona and Sydney, which are linked to infoBigger.css. This morning, I changed the css for these two popups to infoProb.css and took the media queries out of it. It seems to work, but as, again, I don’t have access to small screens I wonder what these pages look like in them and what I could do to solve the problem. Any ideas?
The other problem in sightsStoDom.html is more complicated as it rests on infoBig.css and I don’t want to touch that as it controls many other things. The problem here is “only” ther Parque Mirador. I am happy to wait a few days to see if there is good workaround.
My idea of substituting media queries with a second stylesheet might have made sense last night; it doesn’t now. If I have a stylesheet instead of media queries the various small screens will not adjust to the appropriate width.
For your popups you don’t really need any widths at all as the popup window is framing the content so just let it be fluid and adapt to larger or smaller as required. Code it fluidly and you probably won’t need any media queries for those small pages. Just use margins to make a bit of room where needed and to push things around. You should also tidy up all the errors in the code as already mentioned as anyone could trip up a browser.
I am confused over the above. Are you referring to media queries, or saying that I don’t need them? As for correcting the errors in the code, do you mean opening and closing the <p>s? The code validates properly in HTML5.
Thank you very much
The code that is upsetting the anchors in infoBigger.css is this:
@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;
}
}
the code is meant for devices with max-width 500px.
The popups are 900px wide, and the div. box inside 820px. So, why should it affect the proper rendeing of the anchors?
Even if Opera and Chrome looked at the popups as small devices, the fact that they are well over the 500px should make them ignore the media queries code.
I’m at a loss here…
Yes that’s what I was saying in my last post. The code in that media query should not have any effect on the display but “because of the browser bug” something weird is happening for no reason which is why you can’t really compensate for it.
Again its probably the 100% width that’s causing the problem and you should avoid re-defining the width to see if the problem goes away again.
It’s not logical and the only solution I could see is to avoid the rules that are upsetting it. It’s as though the browsers is confused by the new window and seems to be getting muddled with the css.
All in all, it only confirms my original points never to use new windows or at least never to custom size them.
1 Like