Adding text box into existing page

[coothead]

Many thanks, I will remember that.

It doesn't take much to stop a script from running.

coothead

[theremotedr]

Yes,
I have found that out but then need to look ages for a . or a , which can be hard

[theremotedr]

Morning,
I am now looking at hiding the text box above the main image.
This would apply to mobiles & tablets
The minimum size before it would be shown is 1024px

I have applied the following then f12 on keyboard but i am still able to see it all smaller devices.

 @media ( max-width: 1024px ) {
     .info{
	  visibility:hidden;
	}
AND ALSO

 @media ( max-width: 1024px ) {
     .info{
	  display:none;
	}
 }
 }

[coothead]

Hi there theremotedr,

try it like this...

@media ( max-width: 64em ) {
#info-holder {
    padding: 1em 0;
 }
#info {
    display: none;
  }
 }

coothead

[theremotedr]

I have it working now but only like below with both codes as opposed to just one which i know is incorrect.

@media screen and ( max-width: 1023px ) {
     .info{
	  visibility:hidden;
	}
 }
 @media screen and ( max-width: 1023px ) {
     #info{
	  display:none;
  }   
}

Changing visability for display and other combinations then breaks the code & doesnt work

[theremotedr]

Hi there theremotedr,

try it like this...

@media ( max-width: 64em ) {
#info-holder {
    padding: 1em 0;
 }
#info {
    display: none;
  }
 }

coothead

I have used this code but didnt work for me.
My code above works but it shouldnt be 2 codes but just 1.

I have added your code & updated the site for you to take a look in real time.

Thanks

[coothead]

Hi there theremotedr,

This is caused by a rather difficult to spot error in your demo.css file....

 .blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1.7s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
   }
 }
 /* Hide text box mobiles and phones less than 1024px */
 @media ( max-width: 64em ) {
 #info-holder {
    padding: 1em 0;
 }
 #info {
    display: none;
  }
 }

The highlighted closing bracket is the cause of the problem and must be removed.

coothead

[theremotedr]

Well spotted,what we talking about a few posts ago.....

I changed the 16em to 1023px
Also 1em to 16px

Thanks for the advice & support.

Have a have day.

[coothead]

Hi there theremotedr,

It took me the best part of half an hour to discover that little bugger.

coothead

[styxlawyer]

If you suspect that there may be a problem in any CSS file, just run it through CSS Lint which will find most syntax errors in just a few seconds.

It does have a few hang-ups like warning about the use of IDs in selectors which don't make sense to me, but will find serious errors such as missing or extra braces.