Skip navigation
friedamee2
Currently Being Moderated

use 2 different images in mobile layout?

Apr 6, 2013 9:22 AM

Tags: #dreamweaver #images #layout #cs6 #grid #fluid #use_2_different_images

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

 
Replies
  • Currently Being Moderated
    Apr 6, 2013 10:50 AM   in reply to friedamee2

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 1:12 PM   in reply to friedamee2

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 1:27 PM   in reply to friedamee2

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 7, 2013 10:57 AM   in reply to friedamee2

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points