Announcement

Collapse
No announcement yet.

More fun with columns - 1/3 and 2/3

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

    More fun with columns - 1/3 and 2/3

    I understand how the u-grids-3 (with its different iterations) will create 3 equal columns with its confines. How do I create a 1/3 column followed by a 2/3rds 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

    #2
    Hi Leslie,

    You will have to use the u-width utility classes, the grid classes only make equal width columns.
    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
      Originally posted by Matt Zimmermann View Post
      Hi Leslie,

      You will have to use the u-width utility classes, the grid classes only make equal width columns.
      Thanks, I was just going to come back and answer my own question with that I did. I removed the u-grids-1 u-grids-3--m from the section and added u-width-12 u-width-4--m to the figure. I'm working on finding the best "breakpoints" for the various screen sizes.

      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


        #4
        Matt - is it possible to make the column the size of the image without making it a fixed width? Or should I just make my own custom wide (with the flex-basis calc)?
        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


          #5
          Hi Leslie,

          In those cases, I would recommend creating your own entity within the column and customize the code.
          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


            #6
            Originally posted by Matt Zimmermann View Post
            Hi Leslie,

            In those cases, I would recommend creating your own entity within the column and customize the code.
            It's kind of cool to be able to do that.
            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


              #7
              Matt, does using "display: table-cell" work with this framework? (Sounds like that's the behavior type she is looking for.)
              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


                #8
                Hi Bruce,

                No reason it shouldn't work.
                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


                  #9
                  Originally posted by Bruce - PhosphorMedia View Post
                  Matt, does using "display: table-cell" work with this framework? (Sounds like that's the behavior type she is looking for.)
                  Any examples of how best to use this? I found it super easy to create my own flex-basis calc (which allowed me to fine-tune the width). But it's always good to have more than one option.

                  For posterity sake, Matt isn't the goal to standardize coding methods? What will be the approved method for something like this?

                  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


                    #10
                    Hi Leslie,

                    Generally, the recommendation is to follow the BEM structure mentioned in the documentation and use the "t-" prefix for your styles so you, and any other developer you have work on the site, know that this is something theme specific.
                    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


                      #11
                      Originally posted by lesliekirk View Post

                      Any examples of how best to use this? I found it super easy to create my own flex-basis calc (which allowed me to fine-tune the width). But it's always good to have more than one option.

                      For posterity sake, Matt isn't the goal to standardize coding methods? What will be the approved method for something like this?
                      You'd just apply it to the container holding the image, or the top level container that is defining the width. (Hard to be more specific.)

                      "display: table-cell" just makes the container behave like an 'old style' <td></td> meaning it infers more from what's INSIDE it than what IT (the container) inside.

                      (Yea, you might need to read that several times :) )
                      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

                      Working...
                      X