Announcement

Collapse
No announcement yet.

Hitting the Shadow running -- product page

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

    Hitting the Shadow running -- product page

    Finally digging into a Shadows themed store and not quite getting the relationship of the grid. And, when using inspector, CSS seems to be missing (but while weird it's not my question).

    This site is mainly high-quality images for the products. It almost wants to be fluid/unconstrained. On the product page, when I use "unconstrained" for the main_image the image is rendered as desired but I lose the right column -- or the second column.

    The question is, I guess, how do I define the product-details-1 and product-details-2 in two columns where details-1 is the image taking about 70% of the width? The desktop will likely be the only screen with two columns -- of image and CTA button.

    It's possible I need to make this whole store fluid. Is there a proper way to do that?

    Thanks,

    Scott


    Need to offer Shipping Insurance?
    Interactive Design Solutions https://www.myids.net
    MivaMerchant Business Partner | Certified MivaMerchant Web Developer
    Competitive Rates, Custom Modules and Integrations, Store Integration
    AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
    My T-shirt Collection is mostly MivaCon T-shirts!!

    #2
    Hi Scott,

    Although it would require a bit of massaging, you can remove the u-grid-* classes from the o-layout and add the -width-* classes you would like to the o-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
      Thanks Matt. I'll monkey around with that.

      Scott
      Need to offer Shipping Insurance?
      Interactive Design Solutions https://www.myids.net
      MivaMerchant Business Partner | Certified MivaMerchant Web Developer
      Competitive Rates, Custom Modules and Integrations, Store Integration
      AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
      My T-shirt Collection is mostly MivaCon T-shirts!!

      Comment


        #4
        Matt,

        Shadows 1.03 looks like it's missing the "xtra-small" breakpoint. Looks like I'll need to add? Where should I add it or is there an update to the CSS files? If adding myself, should I add as a CSS resource or is there an existing file I could add it to that won't get overwritten by potential future updates?

        Scott
        Need to offer Shipping Insurance?
        Interactive Design Solutions https://www.myids.net
        MivaMerchant Business Partner | Certified MivaMerchant Web Developer
        Competitive Rates, Custom Modules and Integrations, Store Integration
        AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
        My T-shirt Collection is mostly MivaCon T-shirts!!

        Comment


          #5
          Hi Scott,

          Once you start using breakpoint specific code, such as u-width-*, you are essentially saying that whatever the first value that is set is for the "extra-small" breakpoint through whatever you are calling. So, an element that has the classes of u-width-12 and u-width-8--s, with set the width to 12 columns on all screens smaller than the small breakpoint (480px) and to 8 columns on screens of small or larger.
          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
            So basically, I need to be specific about ~non-mobile~ screens?

            Another way to ask that question, Mobile First means the CSS class structure is built to layout the mobile-friendly grid first?

            Scott

            Need to offer Shipping Insurance?
            Interactive Design Solutions https://www.myids.net
            MivaMerchant Business Partner | Certified MivaMerchant Web Developer
            Competitive Rates, Custom Modules and Integrations, Store Integration
            AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
            My T-shirt Collection is mostly MivaCon T-shirts!!

            Comment


              #7
              Hi Scott,

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

              Working...
              X