9 Replies Latest reply on Jul 23, 2013 12:09 PM by shinockmc

    I am trying to display a different image in mobile view than on my desktop view

    shinockmc

      I am trying to display a different image in mobile view than on my desktop view. I have tried using  #target img {display:none;) but this carries over to my tablet view. It doesn't carry over to the desktop view. Do you have any ideas please? I would post the code but I am quite abit through the site so its pretty long.

        • 1. Re: I am trying to display a different image in mobile view than on my desktop view
          Nancy OShea Adobe Community Professional & MVP

          Use CSS media queries to target specific device widths.  Adjust breakpoints as required.

           

          /* Special Rules for Mobile */

          @media only screen and (max-width: 480px) {

          #target img {display:none}

          }

           

          /* Special Rules for Tablets */

          @media only screen and (min-width: 481px) {

          #target img {display:none}

          }

           

          /* Special Rules for Desktops */

          @media only screen and (min-width: 1024px) {

          #target img {display:block}

          }

           

           

          Nancy O.

          • 2. Re: I am trying to display a different image in mobile view than on my desktop view
            shinockmc Level 1

            Thanks for getting back Nancy, I am doing that but when I use this,

            /* Special Rules for Mobile */

            @media only screen and (max-width: 480px) {

            #target img {display:none}

            }

             

            /* Special Rules for Tablets */

            @media only screen and (min-width: 481px) {

            #target img {display:none}

            }

             

            /* Special Rules for Desktops */

            @media only screen and (min-width: 1024px) {

            #target img {display:block}

            }

             

            It doesnt display on tablet or mobile just desktop. Even if I change

            /* Special Rules for Tablets */

            @media only screen and (min-width: 481px) {

            #target img {display:block}

            }

            it still doesnt show on tablet. It seems to inherit it always from mobile. I have even tried display:block;!important, but that doesnt work either

            • 3. Re: I am trying to display a different image in mobile view than on my desktop view
              Nancy OShea Adobe Community Professional & MVP

              "It doesn't display on tablet or mobile just desktop."

               

              That's right.  That's exactly what you're telling it to do. 

                   Desktop, display:block = show me. 

                   Mobile & Tablet, display:none = hide me.

               

              EDIT.  I just re-read your post.  Can you post a link to your page?

               

               

               

              Nancy O.

              • 4. Re: I am trying to display a different image in mobile view than on my desktop view
                shinockmc Level 1

                Nancy my page is not online at the moment as it is still being constructed. I must have explained it wrong, I will try again.

                 

                I have multiple divs that I want to show on desktop and tablet however I want to show a different image on mobile view. I would like to keep the same divs as there is 12 of them. So to clear things up,

                 

                I want to show a different image in mobile view than in tablet and desktop. What I have tried so far is

                 

                <div id="target"><img src="target.png" img align="middle"></div>

                @media only screen and (min-width: 481px)

                #target {

                          clear: both;

                          float: left;

                          text-align:center;

                          margin-left: 0;

                          width: 100%;

                          display: block;

                }

                 

                 

                 

                #target img {display:none;}

                 

                @media only screen and (min-width: 481px)

                #target {

                  clear: both;

                  float: left;

                  text-align:center;

                  margin-left: 0;

                  width: 100%;

                  display: block;

                }

                 

                #target img {display:block;}

                 

                @media only screen and (min-width: 1024px

                 

                #target {

                  clear: both;

                  float: left;

                  text-align:center;

                  margin-left: 0;

                  width: 100%;

                  display: block;

                }

                 

                #target img {display:block;}

                 

                But what I am really looking to do is to have a different image visable only on mobile view, hidding it isnt ideal. I would like to essentially have a command to say "if mobile screen display this image X, if table or desktop dislpay image Y"

                 

                Im not even sure if this is possible, I hope I have been more clear. Thank you

                • 5. Re: I am trying to display a different image in mobile view than on my desktop view
                  Nancy OShea Adobe Community Professional & MVP

                  Media queries must be wrapped in their own set of brackets { } which you're missing.  Pay close attention to the code structure below.  Notice the extra set of brackets before and after the style rules?

                   

                  /* Special Rules for Tablets */

                  @media only screen and (min-width: 481px) {

                  #target img {display:none}

                  }

                   

                   

                  Nancy O.

                  • 6. Re: I am trying to display a different image in mobile view than on my desktop view
                    shinockmc Level 1

                    Nancy I quickly wrote this here, on my actual CSS I have made sure all the brackets are there...

                     

                    But what I am really looking to do is to have a different image visable only on mobile view, hidding it isnt ideal. I would like to essentially have a command to say "if mobile screen display this image X, if table or desktop dislpay image Y"

                     

                    Im not even sure if this is possible, I hope I have been more clear. Thank you

                    • 7. Re: I am trying to display a different image in mobile view than on my desktop view
                      Nancy OShea Adobe Community Professional & MVP

                      Insert both images into your HTML.  Give each image a unique ID or class name. 

                       

                      <div>

                      <img id="mobile" src="your_mobile_image.jpg" alt="description">

                      <img id="desktop" src="your_desktop_image.jpg" alt="description">

                      </div>

                       

                      CSS:

                       

                      /* Special Rules for Mobile */

                      @media only screen and (max-width: 480px) {

                      #mobile {display:block}

                      #desktop {display:none}

                      }

                       

                      /* Special Rules for Tablets */

                      @media only screen and (min-width: 481px) {

                      #mobile {display:none}

                      }

                       

                      /* Special Rules for Desktops */

                      @media only screen and (min-width: 1024px) {

                      #mobile {display:none}

                      }


                      That should work!!

                       

                       

                      Nancy O.

                      1 person found this helpful
                      • 8. Re: I am trying to display a different image in mobile view than on my desktop view
                        Jon Fritz II Adobe Community Professional & MVP

                        Another alternative would be to place the images as background-images for a <div> and change that background-image value via the Media Queries.

                        1 person found this helpful
                        • 9. Re: I am trying to display a different image in mobile view than on my desktop view
                          shinockmc Level 1

                          Thats it Nancy I think that will work I dont know why I didnt think of that! So simple