6 Replies Latest reply: Apr 7, 2013 10:57 AM by Nancy O. RSS

    use 2 different images in mobile layout?

    friedamee2

      I have my fluid grid layout done, and it is displaying right for mobile, tablet, desktop.

       

      I've entered content, and it shows in all three.

       

      Problem:

      The image schedule1.png is far too wide to scale for mobile view, but it is clear in the other 2 layouts (tablet and desktop).

       

      My solution: I made a special schedule1-mobile.png (just moved text closer to left in picture and then cropped width so there is less scaling involved if any).

       

      Problem2 (unsolved): How do I insert schedule1-mobile.png into the mobile layout so that schedule1-mobile.png appears only in the mobile layout view, instead of the regular sized schedule1.png?

       

      I tried just inserted it while in the mobile view of my layout, but that just replaced schedule1.png in all 3 all sized layouts. I want the image schedule1.png to stay in the tablet and desktop layouts.

       

      I'm terminology stupid right now, probably why I wasted a day looking for an answer and finding anything but...I did learn lots though! Just not how to do this particular thing. Please any help appreciated!

       

      Cheers,

      Frieda

        • 1. Re: use 2 different images in mobile layout?
          Nancy O. MVP

          Frieda,

          Please post a URL to your page.

           

          Below is an example of a Fluid Grid Layout with multiple images.  They all re-scale to fit device width.

          http://alt-web.com/FluidGrid/Fluid2.html

           

          It is achieved with this code in the FluidGrid.css

              

          img, object, embed, video, iframe {

          max-width: 100%;

          }

           

          And no height or width attributes in the HTML markup.

           

           

           

          Nancy O.

          • 2. Re: use 2 different images in mobile layout?
            friedamee2 Community Member

            Thank you for your answer, Nancy O.,

             

            I do not have a site to post to yet, I literally only have 1 page done. I am new to this.

             

            The code you show above was automatically inserted by DW when I used the fluid grids feature. The scaling of the image worked fine, the problem is the width of the image itself. The image needs to be read by the viewer, but the scaling of such a wide image makes that impossible. So I created a second image, less wide for mobile viewing only.

             

             

            I need to get schedule1-mobile.png to load when the person is viewing through a mobile device. Every other screen display is to see schedule1.png

             

            So I have 2 images, and 1 of those has to load for mobile devices. It is like nobody knows how, or perhaps there just is not a way, and that is some sort of secret. LOL.

            • 3. Re: use 2 different images in mobile layout?
              Nancy O. MVP

              Can we see your schedule.png?  Use the Camera icon to insert images into a web forum reply. 

               

              My philosophy is to not use images for schedules or anything that contains large amounts of text.  Best practice is to use real text that can be indexed, translated, read by screen readers and easily manipulated by humans.

               

               

              Nancy O.

              • 4. Re: use 2 different images in mobile layout?
                Nancy O. MVP

                If you're married to using images, use media queries & CSS display properties.

                 

                /* Special Rules for Mobiles */

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

                     #small_img  { display:block}  /**show**/

                     #big_img   {display:none}  /**no-show**/

                }

                 

                /* Special Rules for Tablets */

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

                     #small_img  { display:none}  /**no-show**/

                     #big_img   {display:block}  /**show**/

                }

                 

                /* Special Rules for Desktops */

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

                     #small_img  { display:none}  /**no-show**/

                     #big_img   {display:block}  /**show**/

                }

                 

                 

                 

                HTML:

                 

                <div>

                     <img id="small_img" src="path/small_image.png">

                     <img id="big_img" src="path/big_image.png">

                </div>

                 

                 

                Nancy O.

                • 5. Re: use 2 different images in mobile layout?
                  friedamee2 Community Member

                  Thanks so much for your time in this Nancy O. You seem so dedicated to these boards, it is amazing. (not sucking up, just saying what I see with your answering history in other discussions).

                   

                  Here is what I did with what I understood you saying above:

                   

                  My two files are:

                  fluid-grid.css  and index.html

                   

                  I copied the media query lines you posted above and pasted them at the bottom of fluid-grid.css (just above the final } ) and saved the file.

                   

                  Then index.html was opened in source view. I went to where the old image url was, and instead inserted your 2 lines of code, but instead of using a blank div put it inside of the div I already had because it had a name, so when I was done here is what it looks like:

                   

                   

                    <div id="page1">

                           <img id="small_img" src="_images/schedule1-mobile.png">

                           <img id="big_img" src="_images/schedule1.png">

                  </div>

                   

                  Other content divs come after. All changes were saved.

                   

                  When I preview it in Firefox the desktop version works perfectly (I was so excited after wasting a day with no luck until your answer), but when I make the browser smaller some breaks at exactly 786px wide. Both versions of the image are loaded for mobile and tablet views. (a great big oh no what have I done wrong!) When it is previewed in IE newest version none of them work, 2 images per view size.

                   

                  Was I suppose to paste the media queries somewhere else, like maybe a separate file of its own, or was I just to put the code under the already existing @media comments for each device (you know how DW automatically makes 3 separate sections in the 1 .css when you first save the grid setup.

                   

                  I also noticed that  /**show**/ and  /**no-show**/ at the ends of all pasted lines are greyed, like comments in the fluid-grid.css, but here they are green. Am I suppose to put something there, or somehow set show or no-show somewhere. (I would use a question mark, but all I get is french looking characters whenever I am in this forum, same with other keys like the slashes é à and brackets ¨ Ç ^ ç they type as french characters.)

                   

                  I hate asking you for more help because you have been so generous already with your time and knowledge, but if you could tell me what is wrong with what I have done that would be wonderful.

                   

                  PS: I was reading other posts and you answered one about the different between id and class. Anyway after reading your answer do you suppose it would help if I made the small_img and large_img a class instead of an idea. Just grabbing at straws here.

                   

                  Cheers,

                  Frieda and the makeshift french keyboard while in here.

                  • 6. Re: use 2 different images in mobile layout?
                    Nancy O. MVP

                    I copied the media query lines you posted above and pasted them at the bottom of fluid-grid.css (just above the final } ) and saved the file.

                     

                    This would have nested your media queries inside the desktop.  I would like you to use a separate external style sheet called content.css for all your content styles.  Keep fluidgrid.css for your layout only.

                     

                     

                    Nancy O.