3 Column Option via CSS

  • Author
    Posts
  • #117670
    dailycdev
    Member

    My old theme (Periodical Theme) had a 3 column post layout. It worked very well, especially with bigger the resolution. Is there a way to do a 3 page post layout on the home page with a @media?

    The blog I need help with is: (visible only to logged in users)

    #117853
    dailycdev
    Member
    Original poster

    I am hoping to do something like this…
    https://1drv.ms/i/s!AtzxGqXDzsbBhd59P0mnRvQITTjGcA

    This is how I had it working in my old theme.

    #117917
    binarymoon
    Theme Author

    To make it three columns you can use something like:

    @media only screen and (min-width: 1200px) {
    .content-posts article,
    .content-posts .grid-sizer {
    width: 33%;
    }
    
    .home #site-content,
    .archive #site-content {
    max-width: 100rem;
    }
    }
    #117949
    dailycdev
    Member
    Original poster

    I decided to use the following…

    @media
    (min-width: 1920px) {
    .content-posts article,
    .content-posts .grid-sizer {
    width: 33%;
    }

    .home #site-content,
    .archive #site-content {
    max-width: 150rem;
    }
    }

    So that the three columns wouldn’t kick in until the resolution was bigger, however, when using 1920 width I have an issue with the layout, where the text isn’t centered below the picture. The text also, doesn’t go inside the picture with its own grey background.
    https://1drv.ms/i/s!AtzxGqXDzsbBhd8B3HT8tvZN2BaHkw

    If I shrink the width slightly, I still have 3 columns and it looks good.
    https://1drv.ms/i/s!AtzxGqXDzsbBhd8A49_WHtvNzM7afg

    Please let me know what other CSS I need to add to fix the issue when I am in full screen mode. I am using 2560×1440 resolution when the issue occurs.

    #117964
    binarymoon
    Theme Author

    The problem happening there is that the image thumbnails are not large enough to fill the width of the column.

    If you added:

    .content-posts article .thumbnail img {
        width: 100%;
    }

    Then the image would fill the entire space, but it might also be a bit blurry so may not be ideal.

    #117965
    binarymoon
    Theme Author

    Note that your screen resolution is quite high so most people won’t see this problem. The average screen resolution is around 1400 wide – and it works fine at this size.

    #117970
    dailycdev
    Member
    Original poster

    I got the 3 column working now. Thanks so much.

  • The topic ‘3 Column Option via CSS’ is closed to new replies.