Announcement

Collapse
No announcement yet.

Creating a Page with Image grid

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

  • Creating a Page with Image grid

    I am using this theme in our live store and I am trying to create a new static page for the category roots. I just want a grid of category icons similar to the home page of the levels theme (the row of three mid page). I have added the images to the ready theme image section, and crated a page with the mvt items. However they all just show in a vertical line. How do I get them to span three to a row (medium-one-third). I am unclear where to apply css and what codes to use in this theme.

    Any help would be great.

    Marshall
    http://www.hmcdisplay.com
    http://www.churchonwheels.com

  • Can you post a link the page?
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • Yeah, here is the dev site page that I was working on . I have pulled all images and was working on just one image for now too see if I could get the css to work.

      http://dev.churchonwheels.com/COWSTORE.html

      I created the image with ready theme and added the following classes to it: column whole medium-one-third align-center sfnt-ad
      Marshall
      http://www.hmcdisplay.com
      http://www.churchonwheels.com

      Comment


      • Wrap those DIVs with another DIV assigned the class of 'row'
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


        • Right, good grief. Thanks. I have one more probably stupid easy one. Now I have three rows columns working. The only thing I do not see in the CSS is a way to add a space or /br under each image. So the same space that is on the left and right padding but bottom.
          Marshall
          http://www.hmcdisplay.com
          http://www.churchonwheels.com

          Comment


          • I notice on new pages I create to there is a massive amount of white space between the header and the content blocks. This is named <main> why is that there and how should I be using the main block or moving it?
            Thanks,
            Marshall
            http://www.hmcdisplay.com
            http://www.churchonwheels.com

            Comment


            • Within your DIV and below the A tag, add
              HTML Code:
              <span class="h-breaker"></span>
              this will add the space you are looking for. As for the page layout, all your content should be within the MAIN tag. Check your page layout against one of the static pages like PRPO.
              Matt Zimmermann
              Director of UI/UX Standards and Theme Development
              / Miva, Inc.

              Comment


              • OK, can the span be added to the image on the ready theme side. Most of the html is generated with the ready theme block. On the page code, I just add MVT blocks and the system does the rest. I can add the span in the div block. I'm just wondering if that can be added as a function to the image ready theme item.
                Marshall
                http://www.hmcdisplay.com
                http://www.churchonwheels.com

                Comment


                • It does need to be a separate elements from the image MVT tag.
                  Matt Zimmermann
                  Director of UI/UX Standards and Theme Development
                  / Miva, Inc.

                  Comment


                  • Marshall, did you get working? May I see it?
                    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


                    • lesliekirk

                      I did get this version to work and use it on our live site. I was just thinking of changing it soon though.

                      http://www.churchonwheels.com/COWSTORE.html

                      I'm happy to share code if you need anything.
                      Marshall
                      http://www.hmcdisplay.com
                      http://www.churchonwheels.com

                      Comment


                      • Originally posted by marshallw View Post
                        lesliekirk

                        I did get this version to work and use it on our live site. I was just thinking of changing it soon though.

                        http://www.churchonwheels.com/COWSTORE.html

                        I'm happy to share code if you need anything.
                        Ahhh, I see you used the class medium-one-third. I've been playing with the class cmp-product-list__item and used flex-basis: calc(100% / 4); I was having problems with getting my text content to align to the top until I discovered align-items: start;

                        I hope I did it correctly (it looks okay). Thanks for sharing yours.

                        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


                        • Sure, do you have a link to the one you are working on?
                          Marshall
                          http://www.hmcdisplay.com
                          http://www.churchonwheels.com

                          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