Announcement

Collapse
No announcement yet.

Layout - CSS question

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

    Layout - CSS question

    I'm trying to center content using within grids using the Shadows CSS framework.

    If I start with this code -
    Code:
    <div class="o-layout o-layout--wide u-grids-1 u-grids-2--m">
         <div class="o-layout__item">
              <div>Still More Content</div>
         </div>
         <div class="o-layout__item">
              <div>Still More Content</div>
         </div>
    </div>
    I get a nice two column layout where each column takes up half the screen. The "Still More Content" ends up hugging the left side of each column but I would like that to be centered in each column. It looks like I should be able to add the o-layout--justify-center class to center that content. I've put that class in every div in that code and it doesn't do anything. What am I missing?

    Thanks.
    Matt
    Matt E.
    www.harpkit.com

    #2
    Hi Matt,

    If you are looking to center the contents, you should be able to add "u-text-center" to the layout DIV or to the layout items.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      A. That was fast.
      B. It worked! Thank you.

      One follow up question - in what context would I use o-layout--justify-center ?
      Matt E.
      www.harpkit.com

      Comment


        #4
        Hi Matt,

        The justify-content property horizontally aligns the flexible container's items when the items do not use all available space on the main-axis. Using "o-layout--justify-center", items are positioned at the center of the container.
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          I think I get it now. Thanks again.
          Matt E.
          www.harpkit.com

          Comment

          Working...
          X