-
Posts
-
Kriesi team: I have been working on the page indicated in Private Content below. A number of you have helped with issues I have had along the way. Thanks you all for your excellent support.
When I view this page on a smart phone, the section titled “Popular Products” is presenting a few issues.
-
First, the column elements appear to be overlapping each other when in this one column vertical stack. The space between the first product and second product seems to be as I would expect. But spacing between other following products is inconsistent—even non-existent…overlapping in some cases.
Secondly, I would like a 20px left and right margin, where each product image has the blue-gray background color showing. Photos are currently taking up 100% of the screen width. I am actually looking for a consistent blue-gray background color, left, right, above and below each product image. Thank you! —Bill BHey William,
Thank you for the inquiry.
Looks like you’re using a separate Masonry element for each product. Is there a specific reason for this? Have you considered using a single Masonry element to display all the products?
Best regards,
IsmaelIsmael. thank you for your response and question. I had to, in fact, revisit why I did this the way I did, as using one Masonry element all is simpler and more logical. Here is my current challenge and why I did this the way I did.
First, I need each of these Gallery elements (the product photos) to link to a specific WooCommerce product in the stored. The link options for a “Masonry Gallery” element do not allow for that. My only choices are, Lightbox Linking, Custom Link, no fallback, etc.
In looking at this more thoroughly, I see that the Custom Link options are controlled within the Gallery Image settings. I had missed this prior. My workaround (having not seen that this was an option) was to contain each Masonry Gallery element within a column, then use column linking to get to the Woocommerce product.
I am going to investigate your suggestion today. It looks like it will work, and will be much, much cleaner.
Thank you!!!
Ismael, I implemented your suggestion. Proof that missing a small piece of explanation text tends to throw you off onto a. different and often more complex solution. Rebuilding this section as one Gallery element worked perfectly. All I had to do was chase down the links to the Woocommerce products (some of which were links to a brand, rather than a product).
All is good now. Thank you for your help. This can be closed.
- The topic ‘Column elements are vertically overlapping on small mobile view’ is closed to new replies.