Announcement

Collapse
No announcement yet.

Why are the products not flowing as expected on mobile

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

    Why are the products not flowing as expected on mobile

    Hey all. I've been noodling this issue in the background for awhile, but I can't quite put my finger on why it on mobile some product pages look like the attached image.

    According to the CSS of the Levels ReadyTheme the rows should auto flow, but they often have a weird left something that doesn't show up in the browser inspector tool but is affecting the layout.

    Anyone have any ideas?
    Attached Files

    #2
    Did you double check to make sure the images in question; exists, correct format, name, blank space in name, unacceptable characters?
    Thank you, Bill Davis

    Comment


      #3
      Looks like you need to set a define min-height that is equal to the largest block.
      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


        #4
        Originally posted by William Davis View Post
        Did you double check to make sure the images in question; exists, correct format, name, blank space in name, unacceptable characters?
        They should all be correct. I'll hop into the server and check that.

        Comment


          #5
          Originally posted by Bruce - PhosphorMedia View Post
          Looks like you need to set a define min-height that is equal to the largest block.
          Hmm. I thought I had one defined already, but that's a good point. I'll check that again too.

          Conclusion:

          Turns out there were CSS rules for min-height, but not for the element that the items were in.

          So after some hair pulling while I tried to find the right spot to put the new rule, it is working a charm. Thanks everyone! Especially you Bruce - PhosphorMedia
          Last edited by cpp-dev; 07-02-21, 11:28 AM. Reason: Wrote in the conclusion.

          Comment


            #6
            welcome...guess i should have mentioned that its a min-height setting for the outermost container of each individual product. of course, you could also set min-height on each child container with the same effect.
            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


              #7
              I went with the child item, as it was more reliable in our case.

              Comment


                #8
                Originally posted by cpp-dev View Post
                I went with the child item, as it was more reliable in our case.
                that is quite true in general. just takes more time :)
                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


                  #9
                  Originally posted by Bruce - PhosphorMedia View Post

                  just takes more time :)
                  Yeah, there was a bit of faffing about trying to figure out exactly which selector to target to make it go. But that's part of the fun of CSS :D

                  Comment

                  Working...
                  X