Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Apr 2013
    Posts
    7
    Member #
    36159
    On the desktop version of my portfolio site, the thumbnails for all my projects will be sized at 440x440 in a grid. I'm working from the mobile version up, but I'm having trouble getting those images to scale down to fit the smaller divs. For example, here's the basic setup for mobile:

    <section>
    <div class="project-container">
    <a href=...>
    <img class="thumbnail"/>
    </a>
    </div>
    <div class="project-container">
    <a href=...>
    <img class="thumbnail"/>
    </a>
    </div>
    etc.

    project-container {
    position: relative;
    float: left;
    width: 220px;
    height: 220px;
    margin: 0 7px 15px 7px;
    padding: 0;
    }

    .thumbnail {
    max-width: 100%;
    height: auto;
    {

    Am I missing something? In theory this would resize the 440x440 jpeg to 220x220, correct? thanks

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Unless you're using inline styling for the image sizing (ASP.net does this for some strange reason, among other frameworks), I can't see why that wouldn't work.

    Show us the page. Maybe something else is going on.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Apr 2013
    Posts
    7
    Member #
    36159
    http://teddyogilvie.com/homepage_test.html

    I think right now the thumbs are sized at 125x125 px, or something like that. I was working on different sizes last night; regardless, should be the same.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Here's your problem.
    Code:
    img.project-gray {
    position: absolute;
    width: 440px;
    height: 440px;
    }
    The absolute positioning and sizing is what's throwing it all off. Whenever you absolutely position anything, you break the document flow.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Apr 2013
    Posts
    7
    Member #
    36159
    ah got it. So position: relative, or just leave it static by default?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com