@media advice please

[theremotedr]

OK i understand.

I asked as i added where i thought the code needed to go but when i uploaded it i knew i was wrong.

I have now put it back to how it was like before.

I you could add the code you specified into the files i sent you then that would be a huge hurdle for me not to go over.

Thanks

[molendijk]

One last effort. Put this in main.css. It seems to work with me.

[theremotedr]

Morning,
Here is the page in question http://www.theatticbanwell.co.uk/index.html

I would like the background image on the caption section,bottom of the screen to only be shown on tablets & pc etc but not phones in portrait.
Currently in portrait mode on phones its being shown & i don't wish it to be.

In place of the background image being shown on the phones in portrait mode i would like it to be a color #A9A8A6;

Not sure of the correct position within my main css file or code itself.

Something like Background image hidden or media query like if screen if less than XXX then #A9A8A6 otherwise if screen is more than xxx image background-image:url(../../misc/CAPTION-BACKGROUND.jpg);


Thanks very much,
Have a nice day.

[theremotedr]

Hi,
Please can you check my main css file,at the bottom i have added the supplied code.

I am looking to target mobile phone NOT to show the background image in portrait mode.
I am not sure what number to enter.
If you could advise please,

         @media only screen and (max-width: 812px) and (orientation : portrait) {
		   
            #viewer .slide .caption {
                  background-image: none;
				  }

}

[molendijk]

#viewer .slide .caption {
background-image: none;
}

is wrong. It should be:

#viewer .slide, #viewer .caption {
background-image: none;
}

[theremotedr]

Hi,
When i change the code to your supplied code the background image is shown,when using my code the image is not shown and a background color of grey is shown.
This is how i require it so using your code did i make a mistake with the value of 812px or advise otherwise.

The image is called CAPTION BACKGROUND & in my css its shown on line 1143 as shown below.



Thanks very much

[molendijk]

1.
You want CAPTION-BACKGROUND.jpg to be hidden when the screen gets too small for it to display properly. You don't need CSS-orientation for that, see 3 below.
2.
I don't know where you got your code from, but in your main.css, there are still lots of errors of the type I mentioned in my previous post. Correct them. So #a .b .c should be replaced with #a .b, #a .c.
3.
Once you've done that, use the Responsive Design-modus in Firefox to see at which width your image is still acceptable. For instance, if it doesn't look good at width: 690px and less, then replace 480px with 690px wherever you have it.