Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS DIV positioning

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #41260
    linardzb
    Participant

    Hi, Im_ having a bit of a challenge to display an image gallery in 4 columns in Chrome, Opera, Safari browsers. It seems that the .gallery block is having a left margin pushing it inwards. It perfectly works in Firefox. http://www.origin-designs.co.uk

    I played around with column count on 1280px media query, and it seems to be showing the right column count, but the images are not fitting so to speak inside those 5 or in (preferred) 4 columns. Any thoughts anyone? Thanks

    CSS:

    .gallery {
    width: 100%;
    }

    .gallery .gallery-item {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
    color: #333;
    text-decoration: none;
    }

    .gallery .gallery-item img {
    max-width: 100%;
    height:auto;
    -webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
    -moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
    -o-box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
    box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
    background: #fff; /* Solid background color as a fallback for IE */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee));
    background: -moz-linear-gradient(top, #fff, #eee);
    background: -o-linear-gradient(top, #fff, #eee);
    background: linear-gradient(top, #fff, #eee);
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
    }

    .gallery .gallery-item img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .gallery .gallery-item:hover img,
    .gallery .gallery-item:focus img {
    -webkit-box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
    -moz-box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
    -o-box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
    box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
    }

    @media only screen and (min-width : 481px) {
    .gallery {
    -moz-column-count: 2;
    -moz-column-gap: 15px;
    -webkit-column-count: 2;
    -webkit-column-gap: 15px;
    column-count: 2;
    column-gap: 15px;
    }
    }

    @media only screen and (min-width : 769px) {
    .gallery {
    -moz-column-count: 3;
    -moz-column-gap: 15px;
    -webkit-column-count: 3;
    -webkit-column-gap: 15px;
    column-count: 3;
    column-gap: 15px;
    }
    }

    @media only screen and (min-width: 1280px) {
    .gallery {
    -moz-column-count: 4;
    -moz-column-gap: 15px;
    -webkit-column-count: 4;
    -webkit-column-gap: 15px;
    column-count: 4;
    column-gap: 15px;
    }
    }

    Many thanks

#116829
djdaniel150
Member

The problem is, you are using browser specific prefixes! The column selector and its properties are not yet standards, and you shouldn’t be using them for anything other than experimental testing, not on an actual site you intend to publish. The prefixes do work but not perfectly, otherwise you wouldn’t have appended all those prefixes to begin with. You can achieve the same results using absolute positioning along with percentage values for width, height, and position, without all the headaches. I’m glad to see people are putting this new technology to use though, but too much code!

#116831
Paulie_D
Member

Using ‘unfinished’ properties such a column-count is always a risk until such time at they have matured but absolute positioning would be a horrible way to go for this interpretation.

At the moment I would suggest a simple grid such at the one Chris demonstrates here: https://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/

#116836
linardzb
Participant

Oh, thank you djdaniel150 and Paulie_D, its been interesting to see how css has been evoving. Will do simple percentage value with absolute positioning. Thanks again

#116952
djdaniel150
Member

Your welcome linardzb! Yeah, I used absolute positioning to create the entire structure of every page on my newest website “pctechauthority”, it works great. Those percentage values are part of what makes this so flexible too. You can try using the “flexible box model” as well. Although its a little buggy and does require the use of browser specific prefixes. Nonetheless, it amazing what you can do with it. ELements can literally adapt to the viewing area regardless of the resolution at hand.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.