SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css for responsive thumbnail?

    I'm wondering how best to change my css for thumbnail images so they're suitable for a responsive site.

    On full-width images I'm using box-sizing, which will work for the thumbs if I add a containing div but I wanted to avoid the extra div.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You could give them a % width. Or you could perhaps float them so the drop on narrow screens. If you want specific sode, we need a specific example, though.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could give them a % width. Or you could perhaps float them so the drop on narrow screens. If you want specific sode, we need a specific example, though.
    Thanks. You helped me earlier in thread 1075440.

    The non-responsive code is:

    Code:
    img.tl-1 /* left thumbnail */
    {
    clear: both;
    float: left;
    padding: 4px;
    border: 1px solid #aaa;
    margin: 0 15px 2px 0;
    }
    and I'm trying this:

    Code:
    img.tl-1
    {
    clear: both;
    float: left;
    display: block;
    width: 30%;
    min-width; 80px;
    height: auto;
    padding: 4px;
    border: 1px solid #aaa;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari */
    -moz-box-sizing: border-box; /* Firefox */ 
    margin: 0 15px 2px 0;
    }
    The images were either 100 or 150px square on desktops.


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
  •