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

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept