Originally posted by Bruce - PhosphorMedia
View Post
Announcement
Collapse
No announcement yet.
How do I create equal distance between columns?
Collapse
X
-
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:
-
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:
-
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:
-
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:
-
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:
-
Hi Leslie,
I would try adding o-layout--flush to your section and control the spacing within the promo items.
Leave a comment:
-
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>
Code:.u-grids-3-5--m > .o-layout__item { flex-basis: calc(100% / 3.5); max-width: calc(100% / 3.5); }
Leave a comment:
-
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:
-
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.
Tags: None
Leave a comment: