SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive Height Issue - Position: Relative

    Hi all

    Trying to make a relative container expand and contract depending on the image size.
    Been at this for hours, not sure if its possible... hoping somebody can shed some light on the issue.

    I have another CSS for mobile which changes #club-gallery width: 100%, 50% tablet etc.
    The main issue is the height, things only work if I have a fixed value, even with the min-height below nothing changes. I'm stuck with the one height.

    Code CSS:
    #club-gallery {
            width:300px;
            min-height:186px;
            margin-bottom:10px;
            overflow:hidden;
            position: relative;
    }
    #club-gallery img {
            max-width:100%!important;
            height:auto!important;
    }

    I have also tried:
    height: auto;
    height: 100%;

    #club-gallery just disappears

    Code HTML4Strict:
    <div id="club-gallery">
    <img src="images/club.jpg" style="position: absolute; top: 0px; left: 0px; width: 300px; height: 186px;">
    </div>

    The inline styles are set from CSS/JS, this is part of a small gallery which changes depending on screen size.

    Thanks, Barry
    The more you learn.... the more you learn there is more to learn.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The inline styles are set from CSS/JS, this is part of a small gallery.
    If the inlines styles are setting the image to 300px wide, your other CSS will not be able to affect it. I assume this is why you've got !important in there. See if you can temporarily disable the Javascript for now. It may turn out your CSS and HTML would have otherwise worked except the JS is interfering.

    Let's try with some simpler code first and later see if it needs positioning and stuff.

    I have a responsive picture on my site (yes, it's a picture of a cat, this is teh internets). This is the code I have...

    (container around most of the site, has no set width and gets smaller when the screen does)
    <img src="moesie.jpg" width="widthofimage" height="heightofimage" alt="moesie the cat">
    (/somewhere later container ends)

    And the css is
    float: left;
    some margins and stuff
    max-width: 60% (so it never spans the full page)
    height: auto; (keeps it square)
    other styles;

    And this works, but I loaded the picture as large as it will ever get, and does not get stretched larger, which might be what you're doing. Maybe we stick to "let it get as big as it original is" first.

    I figure most of your weird code is from you playing around with it and getting increasingly desperate. Still, I want to knock it down.

    Code:
    #club-gallery {
            max-width:300px; (let it squish)
            margin-bottom:10px;
    }
    #club-gallery img {
            display: block; (setting dimensions is not an inline thing, it's a block thing)
            max-width:100%; (even if you set !important on this, max-width is different from width)
            height:auto;
    }
    Since when your image can get 300px wide, it will (should) automagically get the 186px height, you shouldn't need to worry about club-gallery's height, since this is an HTML image and not a background image.

    Now if club-gallery has a max-width, that should mean if its parents can be squished, it can be as well. You would have to make your screen smaller than 300px to see the effect though.

    What you might want to do for now is (for coding testing only) start with a larger club-gallery and a larger image. Maybe something that's 900px wide or something. This'll be a lot easier to test tablets and the such. Many smartphones nowadays don't get as small as 300... 320 might be the smallest a general smartphone goes. Anything smaller is, I assume, much older, and might require you to do "mobile-first" (if no @media queries are supported).

    Though it may be there is other stuff horizontal to this club-gallery... in which case, you'd have to show us the code of who's sitting next to it, since maybe they are preventing some responsivey stuff from happening.

    If things still aren't budging, cripple the Javascript (find where it's called in teh HTML and change its name or something) and post a link so we can explore further.

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Stomme poes,
    Will have a play with this now and get back to you soon.

    Thanks for quick response and info.

    The more you learn.... the more you learn there is more to learn.

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand this can be easily achieved using just one image, but I have, (example) 3 images inside #club-gallery and another div.club-gallery which holds the thumbnails to trigger the image change inside #club-gallery, which needs a fixed/responsive height so it doesn't expand to show all images. As in my first post, if I don't apply any height #club-gallery doesn't show.
    Code HTML4Strict:
    <div class="venue_right">
        <div id="club-gallery">
            <img src="images/001.jpg" class="border">
            <img src="images/002.jpg" class="border">
            <img src="images/003.jpg" class="border">
        </div>
        <ul class="club-gallery clearfix">
            <li><a href="images/001.jpg"><img src="images/001.jpg"></a></li>
            <li><a href="images/002.jpg"><img src="images/002.jpg"></a></li>
            <li><a href="images/003.jpg"><img src="images/003.jpg"></a></li>
        </ul>
    </div>

    desktop
    Code CSS:
    .venue_right {
            width:322px;
            overflow:hidden;
            float: left;
            margin: 0 20px 10px 0;
            height: 100%;
    }
    #club-gallery {
            width:322px;
            height:202px;
            margin-bottom:10px;
            overflow:hidden;
    }
    smartphone
    Code CSS:
    img {
        max-width: 100%!important;
        height: auto!important;
        display: block;
    }
    .venue_right {
        width: 96%;
        height: 100%;
        margin: 0;
        padding:2%;
    }
    #club-gallery {
        width:100%;
    }

    The original image is 320px wide which shows ok on the desktop.

    mobile sizes needed
    portrait 320 = img size: 300px
    landscape 420 = img size: 320px
    landscape 568(iphone 5) = img size: 280px

    I did read somewhere that because of the relative and absolute relation, these elements are now get taken out of the document workflow, the height has no effect unless absolute.

    Hope this is making sense,
    sorry no link at present everything is localhost.

    Thank you, Barry
    The more you learn.... the more you learn there is more to learn.


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
  •