Announcement

Collapse
No announcement yet.

How do I create equal distance between columns?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • lesliekirk
    replied
    Originally posted by Bruce - PhosphorMedia View Post
    you shouldn't have to add margins...there should be some form of 'justify' for grid spacing like bootstraps "d-flex justify-content-around" Matt?
    I am using "justify"

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Bruce,

    Correct, there is a set of "justify" classes which could be used: https://github.com/mivaecommerce/rea...cts/layout.css

    Leave a comment:


  • Bruce - PhosphorMedia
    replied
    you shouldn't have to add margins...there should be some form of 'justify' for grid spacing like bootstraps "d-flex justify-content-around" Matt?

    Leave a comment:


  • lesliekirk
    replied
    No worries Matt. I just wanted to make sure I wasn't overlooking something before I started adding margin. I used negative margin to overcome the left side. Now to move it from inline to the style sheet

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Leslie,

    Looks like you may have to play with the layout a bit. I'm not really grasping what the final layout you are looking for is.

    Leave a comment:


  • lesliekirk
    replied
    That took away all the spacing. Now the 3 columns are snug up against each other. If I remove the o-layout--justify-center then they all shift to the left, still with no spacing.

    The site is behind a PPD so I can't share a link.

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Leslie,

    I would try adding o-layout--flush to your section and control the spacing within the promo items.

    Leave a comment:


  • lesliekirk
    replied
    Guess I should have mentioned what I already have in place.

    Code:
    <section class="o-layout o-layout--justify-center u-grids-1 u-grids-3-5--m" style="max-width:60em; margin:2em auto;">
    <div class="o-layout__item promo"></div>
    <div class="o-layout__item promo"></div>
    <div class="o-layout__item promo"></div>
    </section>
    I created the u-grids-3-5--m

    Code:
    .u-grids-3-5--m > .o-layout__item {
        flex-basis: calc(100% / 3.5);
        max-width: calc(100% / 3.5);
    }
    It gives me the exact width that I want the columns to be, but the spacing between the columns is too "tight". If I could get the left and right columns to be "flush" against edges, I would be happy

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Leslie,

    Sounds like you would want to use the grids utility classes: https://docs.miva.com/readytheme-sha...ies.html#grids

    Leave a comment:


  • lesliekirk
    started a topic How do I create equal distance between columns?

    How do I create equal distance between columns?

    The docs for Shadows are very good, but I find myself having trouble figuring out to create 3 columns within a div that has a has a set width. I see mention of "o-layout--spaced" but when I try to use it, I'm not finding any style for it.

    I need the images to remain the same size, I would like equal spacing between the columns without the left side padding on the first column.

Working...
X