Results 1 to 5 of 5

Thread: Responsive images

  1. #1
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default Responsive images

    Would you guys please tell me why this css doesn't stop two images from wrapping?

    The animated cup image followed by the "Guy Arseneau" image (that make up the logo,top left of screen) break onto two lines on small device screens.

    Furthermore, why does the first image, the animated cup refuse to resize on smaller screens?

    Website

    Thanks

    Code:
    #logo, #logo-map {
    
        position:absolute !important;
    
        top:20px !important;
    
        left:20px !important;
    
        background-repeat:no-repeat;
    
        max-width:100%;
    	
        height:auto;
    	
        width:auto;
    
        whitespace:nowrap;
    }
    Last edited by KennyP; 09-13-2014 at 09:43 AM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Hi Kenny,

    I can't double check at the mo because I'm on mobile but I'm pretty sure that its because you have width:auto; in the CSS.
    That's only needed for IE8 so change it to width: auto\9; /* IE8 */ and hopefully the pics with 'respond'.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    KennyP (09-13-2014)

  4. #3
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    Hi Beverleyh - thanks for your reply.

    I did make the width change to width: auto\9; /* IE8 */, but it's made for difference.

    I find it strange that the second image(which is png) resizes perfectly, but the first image (which is a gif) doesn't seem to respond to anything I've tried. They're both in the same div with the same css.

    Forgot to mention -- on the welcome/splash page there is another cup gif that will not resize as well.
    Last edited by KennyP; 09-13-2014 at 06:42 PM.

  5. #4
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    Hi again Beverleyh - I finally realized what the problem was...

    If one image is displayed, 100% max width assigned to it is fine. But if there are two images or more, the 100% has to be split amongst however number of images there are. So, the following is now working perfectly, whereas I'm also allowing 2% on each side of the two images in order to center them.
    Code:
    <div id="logo"><img src="/logo/loading-cup-header.gif" border="0" style="whitespace:nowrap; max-width:18%; height:auto"><img src="/logo/guy-arseneau-header.png" border="0" style="whitespace:nowrap; max-width:78%; height:auto"></div>

  6. #5
    Join Date
    Sep 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank. i had same problm.

Similar Threads

  1. Responsive site with CSS
    By setyadwi in forum CSS
    Replies: 2
    Last Post: 04-03-2014, 09:54 AM
  2. Making ddlevelsmenu non-responsive
    By Harleyy in forum JavaScript
    Replies: 0
    Last Post: 02-05-2014, 10:21 AM
  3. Basic responsive tutorial
    By bluelogic in forum CSS
    Replies: 4
    Last Post: 11-17-2013, 05:23 PM
  4. Responsive adaptions
    By chechu in forum CSS
    Replies: 2
    Last Post: 01-13-2013, 10:14 AM
  5. Replies: 0
    Last Post: 02-24-2012, 01:39 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
  •