Can't get 3 column portfolio items to 33.333%

  • I’m having a heck of a time trying to get my 3 column portfolio layout to align correctly. I’d like to have the left side of the first column to be sitting exactly inline with the left side of the .article-header class and the right side of my third column to be lined up with the right side of the .article-header class. When I try to set the width of the following class to 33.333% it moves the third column down.

    ‘.portfolio-columns-3 article {
    width: 33.333%;
    }’

    What am I missing?

    Webpage is https://basinconcepts.com/woodlanddraft/index.php/category/fishing-reports/

    Any help would be appreciated.

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hello marsten,

    without looking at your code, presumably, the boxes have a margin?
    So if you have 3 boxes and every box is 33.3 %, with the margin on each side the box neeeds more space and can not be display side by side.

    If setting “margin: 0;” does not work, also try “margin: 0 !important;”.

    Hope I could help you.

    Thread Starter marsten

    (@marsten)

    Thanks for the advice bhdzllr. I tried your suggestion but still no luck.

    you can try using box-sizing: border-box; which will cause the margin and padding to be include in your 33.3% width;

    ‘.portfolio-columns-3 article {
    width: 33.333%;
    box-sizing: border-box;
    }’

    Hello,

    “border-box” is already set.

    Try this:

    #content .portfolio-columns-3 article {
    width: 33.333%;
    margin-left: 0;
    margin-right: 0;
}
    Thread Starter marsten

    (@marsten)

    Still no luck guys. I appreciate your replies. Maybe this will help. Ultimately I’m trying to achieve the grid style/layout look of this page. I love how precise the formatting is.

    The challenge with my case is, I’m using a theme with way more options than needed so things aren’t as straightforward as they could be. Again, any help is appreciated, I’ve been struggling with this for quite some time.

    if border-box is already set you need to reduce the width. Setting margins to zero won’t help because changing the margin wouldn’t have any effect. Try reducing your width to 33%.

    @mrtom414
    Changing the margin has effect:
    content-box: width = content
    border-box: width = content + padding + border

    The width and height properties include the padding and border, but not the margin.

    from https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

    Also take a look at this picture:
    https://www.zell-weekeat.com/wp-content/uploads/2014/02/box-sizing.jpg

    @marsten

    Your elements also have an element style which makes your articles positioned absolute. This could also be the problem, guess this comes from the JS Library Isotope. Maybe it is possible to deactivate it?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Can't get 3 column portfolio items to 33.333%’ is closed to new replies.

Tags