Mobile site – products not appearing properly

[leapb4ulook]

sorry I submitted the above before finishing my reply – basically so you kno what’s wrong here?

Amy

[Mohammad – SUPPORT]

Hi,

I need specific page url with issue.

Thanks 🙂
With Best Regards
Mohammad

[leapb4ulook]

Hi Mohammad

Here are the URLs to my product pages:

<span style=”text-decoration: underline;”><span style=”color: #0000ff; font-size: medium;”><span lang=””>http://timelessluxuryonline.co.uk/browse-our-collection</span></span></span&gt;

<span style=”text-decoration: underline;”><span style=”color: #0000ff; font-size: medium;”><span style=”color: #0000ff; font-size: medium;”><span lang=””>http://timelessluxuryonline.co.uk/pre-owned-rolex-datejust</span></span></span></span&gt;

<span style=”text-decoration: underline;”><span style=”color: #0000ff; font-size: medium;”><span style=”color: #0000ff; font-size: medium;”><span lang=””>http://timelessluxuryonline.co.uk/browse-our-collection/pre-owned-rolex-precision</span></span></span></span&gt;

Today I can’t seem to see any producsts at all via my mobile. I would like them to appear like the picture (attached) but stacked rather than in carousel. I’m not sure if this is a CSS or product page HTML thing (apologies I am not a developer)?

Thanks for your help!

Amy

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,

Please check it now after clear the cache of your browser.

Mohammad

[leapb4ulook]

Amazing, the producst are now displaying perfectly. Thank you.

One last question (and let me know if this is out of scope, appreciate you’ve gone above and beyond helping me with this already) – do you know if it’s possible to have the products stacked rather than in a corousel?  I tried usign the code “carousel=”no”, which didn’t work.  I wan’t to have products sstacked as it’s easier user experience to scroll up and down to view them.

[Kyle – SUPPORT]

You would need to use the products asset instead of the product carousel asset

– Kyle

[leapb4ulook]

Thanks Kyle. Can you tell me what I’d need to change on the code below?

 

<span style=”font: 16px/32px Georgia, ‘Times New Roman’, ‘Bitstream Charter’, Times, serif; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; float: none; display: inline !important; white-space: normal; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-stroke-width: 0px;”>[/spb_text_block] [spb_products title=”Rolex Precision” category=”precision” carousel=”yes” product_size=”standard” item_count=”8″ width=”1/1″ el_position=”first last”]</span>

[Kyle – SUPPORT]

Changing the carousel to no should work, try clearing your cache after you have saved the page

– Kyle

[leapb4ulook]

I tried that and the products revert to displaying incorrectly. I have cleard my mobile cache and tried on a different browser. See attached of what it looks like with “carousel=”no”

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

You need the page builder active, rather than the visual editor

– Kyle

[leapb4ulook]

Thanks, I’ve switched to the Swift page builder and toggled Carousel on and off – the products are still displying incorrectly on mobile <span style=”color: #ff6666;”>/browse-our-collection/pre-owned-rolex-precision</span>. I guess I should stick to carousel.

[Kyle – SUPPORT]

Hmm ok stick to carousel for now and I’ll check the issue for none carousel on my demo

– Kyle

[leapb4ulook]

This reply has been marked as private.

[David Martin – Support]

Please test adding this:

@media only screen and (max-width: 479px) {
body .woocommerce-shop-page ul.products li.product, body .product_list_widget > div > ul.products li.product {
    width: 100%!important;
}
}

Thanks.

[leapb4ulook]

Amazing, it worked! Thanks David.