Unable to validate css: media queries

HTML & CSS
1

Sorry. Problem probably solved.

2 
       @media screen and (max-width:930px) { 
      
      div.box {
float:right;
width:600px;
}

This one is missing the closing curly brace for its media query. :smile:

1 Like
3

Thanks. In fact I just posted saying that I had found that.

But then I need to understnad how to complete the narrowing of the page pintotours.net/Oceania/Australia/airport.html which is driving me nuts!

4

Can you elaborate (of if you want, feel free to post a new topic in the CSS category. We have a lot of CSS gurus here that will definitely be able to solve any issue you are experiencing.

5

Sorry! Iā€™m so panicky that I keep changing things and get them worse!

Please, look at pintotours.net/Pinto/infoBigger.css which contrlols http://pintotours.net/Oceania/Australia/airportSyd.html

I am trying to make some sense of the page when it narrows for smaller screens. I have succeeded up to a point, but especially for max-width 500 it all crashes and does not render for mobiles as I expected.

I will leave the page alone for 30 mins, or itā€™ll get even worse.

many thanks for your help

6

When I add float:none to your media query for width 500px (and 600px), it cleans up nicely on div.box (I also set width: auto on both the 500 and 600 media queries).

7

Hi

many thanks. itā€™s getting there.
But on my PC Iā€™m still having probs

at 1300 ok
at 1080 ok
at 930 ok
ar 810 I think ok
at 600 or arounf there the div.box diappears downwards for lack of space and when it comes back the left hand side of the div is outside the availabale screen, until 500 kicks in

at 500 ok

I guess I need to reduce width at 600 but now it is autoā€¦

8

I see two float declarations in your 600 media query:

  @media screen and (max-width:600px) { 
     #outside {
display:none;
}      
      div.box {
      float:none;
float:right;
width:auto;
} 


}

Remove the float:right, Iā€™d also change 600px to 690px

9

And now I have a bigger problem!!1

That page is in fact a popup to start with, which comes out of http://pintotours.net/Oceania/Australia/Sydney.html and apperas when you click on ā€œAt the airportā€ (right sidebar)

the contants of the pop-up fill the pop-up and should be centred. Well, no longer!

What can I do?

10

Let me explain:

The important page is the pop-up that comes out of the main Sydney page. However, most of my FEW visitors arrive at the pop-ups directly from googling. When that happens they end up with a green page with a box in the middleā€¦

What I am trying to do is to a) make the page more attractive (eventually) and b) urge visitors to go to the main page.

But at the end of the day it cannot be done at the expense of the pop-up.

11

How does the side-bar disappear? I see it has a style=ā€œdisplay:noneā€, if that were still visible, the page would be centered.

With that gone, you need to remove all float:right on the div.box, otherwise, margin-left: auto and margin-right: auto does nothing.

12

Sorry, I donā€™t get it. Do you mean the disply:none in the media queries? That is to get rid of the new sidebar when the dvice screen gets too small.

13

Ah, I wasnā€™t very clear there is all of a sudden an inline style=ā€œdisplay:noneā€ on the sidebar in the HTML. Not in the CSS.

14

This is exactly why I told you (in your other threads) to get rid of the popups and include them in your main site as normal content. At every step these pop ups have been causing you problems and all for nothing. You are now adding extra content to your popup and thus there will be very little difference had you simply linked to a new standard page from the start.

Pop ups are evil most of the time and should not be used for presenting content in this manner. (Sorry to go on about it :smile: )

15

cpradio: whixh HTML. Iā€™ve checked Sydney.html and airportSyd,html and cannot find any inline like you say.

Paul, I am sorry, and your advice has not been thrown into the dustbin. It is just that now I have to develop certain things before I start changing everything again.

16

Ok. I found it! It was the
float:right;
width:700px;

in the media queries for 1080 and 930

But now I have gaps in the queriesā€¦

I,m not sure if the gap is in the 930 or tthe 810

17

Weird, when I go to http://pintotours.net/Oceania/Australia/Sydney.html, click on At the Airport, I see a page that has style=ā€œdisplay:noneā€ on the outside div.

If I visit http://pintotours.net/Oceania/Australia/airportSyd.html directly, it doesnā€™t have the inline styleā€¦

No idea what is causing that.

18

Hi cpradio

Which browser are you using? Iā€™v etaken out the
float:right;
width:700px

from the queries and now the popup opens properly. What I find is that the sidebar tends to flash in the background while the page loads.

But I have nothing about display:none, other than that sidebar has a display:none in the queries to get rid of it when the screen of the device gets too small

At the moment if you could help me with the queries again, I would begrateful. One is not working since I took that code out. Iā€™ve tried a few things and soon I 'll destry what still worksā€¦!!!

PS - the problem is that we canā€™t put in the queries a width to anything above the width of the pop-up or it will interfere with it, which is the width of the div .box i.e. 820px

19

I tested in Chrome, Firefox and IE, all produced the results I was seeing.

Can you explain the issue in more detail, Iā€™m not sure I understand what problem you are currently having.

Edit: Found the cause of the inline style

<script type="text/javascript">
(function() {
   'use strict';

function init(){
  
if(window.name=='newwindow') {
document.getElementById('outside').style.display='none'; // THIS IS THE OFFENDING LINE

document.getElementById('popup-test').innerHTML=
   '<h3><a href="#">Close<\/a><\/h3>'+
   '<h4><\/h4>'+
   '<h3><a href="Sydney.html" target="top"><\/a><\/h3>';
var anc=document.getElementById('popup-test').getElementsByTagName('a');
for(var c=0;c<anc.length;c++) {
anc[c].onclick=function() {
   window.close();
   return false;
    }
   }
  }
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);

})();
</script>
20

Oh, dear!

That line was inserted yesterday by a friend, in order to hide the sidebar that appeared when you opened the pop-up from the Sydney.html page.

I say, oh dear, beacuse I do not see it in any of those browsers, and if you do I have another problem!

What I was trying to do now is to be able to narrow the page sideways, like when you started with your help, and make sure the transitions are smooth. Since I took the widths out of 1080 and 930 there is abig gap before you raech the next max which I think is the 810.

the problem as I wrote is that above 820px we cannot use widths in th queries, or it will affect the pop-up.