SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Responsive Thumbnail Margins Problem

    Hey all,

    I have a responsive thumbnail grid (static, for now) on this page:
    http://ae.safeguardmontana.com/projects-2/

    It's based on this guy's code:
    http://designshack.net/articles/css/...bnail-gallery/

    It works fine, except that the margin between the images gets too wide on wide screens. The margins scale too and are expressed as a percentage of the overall width.

    My question is, is there a way to define the margins at a fixed width and still retain the scalability? Or otherwise have more control over margin spread as the browser window gets wider?

    Any thoughts on this greatly appreciated.

    Thanks!

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    This isn't a responsive layout. It is fluid (not static/fixed). The images change from a normal aspect ratio when the page is sufficiently wide enough to a narrower-than-normal (distorted) aspect ratio when the page is not wide enough... the height of the images is unchanged.

    The images are in "thumbcontainers" whose margins are quite narrow. The images are simply centering themselves within those containers.

    You can give the thumbcontainers a background color so the images therein don't *appear* to have as much white-space between them at wide widths.

    However, since this is an architectural firm's page, I imaging that the distorted images are more important to the client than the space between them.

    In my opinion, this design needs a bit of conceptual work. More planning.

  3. #3
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Kaliphronia,

    Remove the width on the thumb containers and the spacing issue will disappear. Specifically this code,

    .thumbItem {
    float: left;
    width: 32.3%;
    margin-right: 1%;
    margin-bottom: 1%;
    }

    Best,

    shawn


Tags for this Thread

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
  •