Announcement

Collapse
No announcement yet.

How do I create equal distance between columns?

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

  • 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.

    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • Hi Leslie,

    Sounds like you would want to use the grids utility classes: https://docs.miva.com/readytheme-sha...ies.html#grids
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    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>
      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
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


      • Hi Leslie,

        I would try adding o-layout--flush to your section and control the spacing within the promo items.
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        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.
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          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.
            Matt Zimmermann
            Director of UI/UX Standards and Theme Development
            / Miva, Inc.

            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
              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              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?

                Bruce Golub
                Phosphor Media - "Your Success is our Business"

                Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                phosphormedia.com

                Comment


                • Hi Bruce,

                  Correct, there is a set of "justify" classes which could be used: https://github.com/mivaecommerce/rea...cts/layout.css
                  Matt Zimmermann
                  Director of UI/UX Standards and Theme Development
                  / Miva, Inc.

                  Comment


                  • 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"
                    Leslie Kirk
                    Miva Certified Developer
                    Miva Merchant Specialist since 1997
                    Previously of Webs Your Way
                    (aka Leslie Nord leslienord)

                    Email me: [email protected]
                    www.lesliekirk.com

                    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                    Comment

                    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