Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Possible to make pictures disappear when window resized?

    Hello everyone.

    I was wondering if its possible to make a picture disappear when the person's browser window is too small?

    Kind of like a wrap, except instead of pushing things down so they fit, it should make things disappear.

    Basically, I want to have 3 ads side by side at the top of my site. But if someone's browser is too small to show all 3, I don't want there to be horizontal scroll bars. So if you resize your browser making it smaller, it'll show 2 ads, then as it gets smaller it'll show 1 ad, then as it gets smaller, it'll show no ad.

    Is that possible?

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,138
    Thanks
    7
    Thanked 257 Times in 256 Posts
    Yes, Google "css media queries"

    Dave

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the help tracknut.

    I've Googled it and am having trouble with it. For some reason, it doesn't seem to apply the css rules when I resize my browser window. It just ends up moving the boxes as if theres a wrap around them. Can you take a look and see if you can find what I'm doing wrong?

    live example at erboh.com/test/test.html

    html
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/test/test.css">
    </head>
    <body>
          <div id="125adcontainer">
            <span id="125ad1"><img src="http://i41.tinypic.com/rkycmd.jpg" /></span>
            <span id="125ad2"><img src="http://i41.tinypic.com/rkycmd.jpg" /></span>
            <span id="125ad3"><img src="http://i41.tinypic.com/rkycmd.jpg" /></span>
            <span id="125ad4"><img src="http://i41.tinypic.com/rkycmd.jpg" /></span>
          </div>
    </body>
    </html>
    css
    Code:
    #125adcontainer {
      height: 125px;
    }
    
    @media all and (max-width: 954px) {
      #125ad1 {
        display: none;
      }
      #125ad2 {
        display: none;
      }
      #125ad3 {
        display: none;
      }
      #125ad4 {
        display: none;
      }
    }
    
    @media all and (max-width: 1089px) and (min-width: 955px) {
      #125ad1 {
        margin-left: 5px;
        margin-right: 5px;
        float: right;
      }
      #125ad2 {
        display: none;
      }
      #125ad3 {
        display: none;
      }
      #125ad4 {
        display: none;
      }
    }
    
    @media all and (max-width: 1224px) and (min-width: 1090px) {
      #125ad1 {
        margin-left: 5px;
        margin-right: 5px;
        float: right;
      }
      #125ad2 {
        margin-left: 5px;
        margin-right: 5px;
        float: right;
      }
      #125ad3 {
        display: none;
      }
      #125ad4 {
        display: none;
      }
    }
    
    @media all and (max-width: 1359px) and (min-width: 1225px) {
      #125ad1 {
        margin-left: 5px;
        margin-right: 5px;
        float: right;
      }
      #125ad2 {
        margin-left: 5px;
        margin-right: 5px;
        float: right;
      }
      #125ad3 {
        margin-left: 5px;
        margin-right: 5px;
        float: right;
      }
      #125ad4 {
        display: none;
      }
    }
    
    @media all and (min-width: 1360px) {
      #125ad1 {
        margin-left: 5px;
        margin-right: 5px;
        float: right;
      }
      #125ad2 {
        margin-left: 5px;
        margin-right: 5px;
        float: right;
      }
      #125ad3 {
        margin-left: 5px;
        margin-right: 5px;
        float: right;
      }
      #125ad4 {
        margin-left: 5px;
        margin-right: 5px;
        float: right;
      }
    }

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there njfail,

    your problems are probably the result of illegal ids.

    They must not start with a number.

    If you make it a habit to validate your HTML and CSS, then you find that basic errors like these will be eradicated.

    Try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    body {
        margin:0;
     }
    #x125adcontainer img {
        float:right;
        margin:0 5px;
     }
    
    @media (max-width:540px) {
      #x125ad4 {
        display:none;
      }
    }
    @media (max-width:405px) {
      #x125ad3 {
        display:none;
      }
    }
    @media (max-width:270px) {
      #x125ad1 {
        display:none;
      }
    }
    @media (max-width:135px) {
      #x125ad1 {
        display:none;
      }
    }
    </style>
    
    </head>
    <body>
    
    <div id="x125adcontainer">
     <img id="x125ad1" src="http://i41.tinypic.com/rkycmd.jpg" alt="">
     <img id="x125ad2" src="http://i41.tinypic.com/rkycmd.jpg" alt="">
     <img id="x125ad3" src="http://i41.tinypic.com/rkycmd.jpg" alt="">
     <img id="x125ad4" src="http://i41.tinypic.com/rkycmd.jpg" alt="">
    </div>
    
    </body>
    </html>
    coothead

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Haha thank you coothead! How could I forget about legal ID's!
    Its working great now.

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts

    No problem, you're very welcome.

    coothead


  •  

    Posting Permissions

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