Page 2 of 2 FirstFirst 12
Results 11 to 17 of 17

Thread: @media advice please

  1. #11
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    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

  2. #12
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,810
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

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

  3. #13
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    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.

  4. #14
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    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,


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

  5. #15
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,810
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    Code:
    #viewer .slide .caption {
    background-image: none;
    }
    is wrong. It should be:
    Code:
    #viewer .slide, #viewer .caption {
    background-image: none;
    }

  6. #16
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    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.

    Click image for larger version. 

Name:	3584.jpg 
Views:	42 
Size:	18.6 KB 
ID:	6250

    Thanks very much
    Last edited by theremotedr; 01-19-2018 at 09:40 PM.

  7. #17
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,810
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    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.

Similar Threads

  1. Media Query advice for ipad 1
    By theremotedr in forum CSS
    Replies: 14
    Last Post: 04-01-2016, 06:36 PM
  2. Media Query Help!
    By LeaChristine in forum CSS
    Replies: 1
    Last Post: 11-22-2014, 11:26 AM
  3. Social media
    By molendijk in forum The lounge
    Replies: 5
    Last Post: 11-11-2013, 05:23 AM
  4. Media RSS Script
    By dazbobaby in forum Looking for such a script or service
    Replies: 3
    Last Post: 02-13-2009, 12:33 AM
  5. Media files
    By southga1974 in forum Other
    Replies: 1
    Last Post: 06-13-2006, 01:12 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •