Announcement

Collapse
No announcement yet.

Fun with Mobile First

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

  • Fun with Mobile First

    So I was thinking the if the class for the mobile display was "first in line" it would be the what is displayed in the mobile view. I have the following

    Code:
     class="o-layout__item u-text-center x-product-layout-images u-width-12 u-width-2-5--m"
    I'm thinking that the class "u-width-12" should be "obeyed" for the smaller screen. It seems to be ignored in favor of my custom classes "u-width-2-5--m"

    Code:
    .u-width-2-5--m, {
        flex-basis: calc(100% / 12 * 2.5);
        max-width: calc(100% / 12 * 2.5);
    }
    What am I doing wrong?
    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

  • Is your custom class wrapped in a media query? Did you place the class in the same "grids.css" file? Your custom class should be located in the same area as the other --m classes. CSS is all about hierarchy and specificity.

    Comment


    • Originally posted by RTHOMASDESIGN View Post
      Is your custom class wrapped in a media query? Did you place the class in the same "grids.css" file? Your custom class should be located in the same area as the other --m classes. CSS is all about hierarchy and specificity.
      No

      No - it's in the theme-styles.css file (which I thought was meant to "overrule" the other files).

      I placed it with the other Product Page styles in that section of the file.



      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 typically want to keep all of your custom styles in that file, but the media queries can make it tricky.

        It doesn't sound like your custom class was wrapped in a media query. So it always gains precedence over u-width-12 as it's loaded later down the line after grids.css... Placing this in your theme-styles may work as well:

        @media screen and (min-width: 40em) {
        .u-width-2-5--m {
        flex-basis: calc(100% / 12 * 2.5);
        max-width: calc(100% / 12 * 2.5);
        }
        }

        Hope this helps!

        Comment


        • That makes sense! Thanks, that's what it needed. I will have to be more diligent with my usage of the media query. I had "assumed" the Mobile First would have been more powerful.
          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


          • Not sure this was posted clearly, especially for others, if you have "style1, style2" and without media queries, style2's same styles override style1.
            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


            • Originally posted by Bruce - PhosphorMedia View Post
              Not sure this was posted clearly, especially for others, if you have "style1, style2" and without media queries, style2's same styles override style1.
              Not sure if that clarified it any. Perhaps in context, an example?

              I was "assuming" that the "mobile first" "u-width-12" was going to kick in because I "thought it was in the "mobile first" position.

              class="o-layout__item u-text-center x-product-layout-images u-width-12 u-width-2-5--m"

              So I'm not sure what you are referring to when you say "style1, style2".

              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


              • Mobile first doesn't necessarily require the mobile classes to come first since the styles applied are determine mostly by media quires. If Style1 was mobile, and Style2 was desktop, mobile never see's those styles.

                If style1 was
                { color:#000, font-size:1rem, text-transform:uppercase }

                and style2 had:

                {color: #4f4f4f}

                the enclosed item will have

                { color:#4f4f4f, font-size:1rem, text-transform:uppercase }

                applied.

                And at least with Bootstrap, Desktop is applied first specifically because of this rule. For example:


                d-none d-lg-block d-md-inline-block

                hides on mobile
                displays as block on desktop
                and inline-block on mid-range

                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


                • It's not Bootstrap and if you dig through the CSS for Shadows you will even see references to Mobile First


                  In the UTILITIES / GRIDS and UTILITIES / WIDTHS



                  /* Mobile First =========================================== */ /** * Width size modifiers. */
                  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,

                    "Mobile First" denotes the fact that is you use a certain class, this will start at the mobile level and stay until, if used, a media query is hit which changes what happens when your class is used.

                    For example, the promo title this class is applied to will be blue wide until you hit a screen width of 48em (768px), then it will be red:
                    Code:
                    .promo-title {
                        color: blue;
                    }
                    
                    @media (min-width: 48em) {
                        .promo-title {
                            color: red;
                        }
                    }
                    Matt Zimmermann
                    Director of UI/UX Standards and Theme Development
                    / Miva, Inc.

                    Comment


                    • Hey Matt,

                      I understand the concept of "Mobile First" and I thought I had been adhering to it in my layout. Again, I had "assumed" that when the page was viewed on a mobile device the class "u-width-12" would "prevail because there wasn't any media query involved. The only way I could get my layout to work WAS to add the media query. I guess that is why I got so confused.
                      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