ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Neighborhood
• April 10, 2015 at 2:14 am #164148
  GTS75

  Member

  Post count: 240

  Hey guys,

  I recently noticed after updating to the most recent version of the theme that the ‘You May Also Like…” section at the bottom of my product pages looks very awkward on smartphones, specifically iPhones. Over half of my traffic is from iPhones, so I really need that section to look better on mobile. Is there something I can do on my end? Or css I can add that’ll allow the 4 products to display stacked when the phone is held vertically and stacked 2 x 2 when the phone is help horizontal?

  I’ve attached two images: one held vertical and one held horizontal.

  I look forward to hearing back from you about solving this issue.

  Dan

  Attachments:

  You must be logged in to view attached files.
  April 13, 2015 at 6:35 am #164487
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  If you using any cache plugin. Please deactivate all cache plugin.
  Thanks
  Mohammad

  April 13, 2015 at 4:05 pm #164779
  GTS75

  Member

  Post count: 240

  Hi Mohammad – I had one WP Super Cache plugin installed but not activated…I deleted it but the problem still persists.

  Anything else I can try?

  April 14, 2015 at 4:26 am #164908
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Have you customized the theme? I need wordpress login detail.
  Thanks
  Mohammad

  April 14, 2015 at 5:15 am #164915
  GTS75

  Member

  Post count: 240

  This reply has been marked as private.
  April 14, 2015 at 5:31 am #164920
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  @media only screen and (max-width: 767px)
  body.woocommerce .has-no-sidebar ul.products li.product, body.woocommerce .has-no-sidebar .upsells.products ul.products li.product {
    width: 43%;
  }
  }
  @media only screen and (max-width: 479px)
  body.woocommerce .has-no-sidebar ul.products li.product, body.woocommerce .has-no-sidebar .upsells.products ul.products li.product {
    width: 43%;
  }
  }

  Thanks
  Mohammad

  April 14, 2015 at 2:44 pm #165087
  GTS75

  Member

  Post count: 240

  This reply has been marked as private.
  April 15, 2015 at 5:23 am #165198
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please remove last css code code and use this new css code:-

  Hi,
  Please use this custom css code:-

  @media only screen and (max-width: 767px){
  body.woocommerce .has-no-sidebar ul.products li.product, body.woocommerce .has-no-sidebar .upsells.products ul.products li.product {
    width: 43% !important;
  }
  }
  @media only screen and (max-width: 479px){
  body.woocommerce .has-no-sidebar ul.products li.product, body.woocommerce .has-no-sidebar .upsells.products ul.products li.product {
    width: 41% !important;
  }
  }

  Thanks
  Mohammad

  April 15, 2015 at 3:14 pm #165388
  GTS75

  Member

  Post count: 240

  Hi – I changed the css and have attached 2 screenshots of what the section now looks like on smart phones both vertically and horizontally.

  It’s better…but still not quite correct yet. Is anyone else having this problem?

  Thanks for all your help

  Attachments:

  You must be logged in to view attached files.
  April 16, 2015 at 5:15 am #165512
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  My colleague, Mr. Kyle will assist you shortly.

  Thanks
  Mohammad

  April 16, 2015 at 4:40 pm #165704
  GTS75

  Member

  Post count: 240

  Okay thanks

  April 17, 2015 at 4:52 am #165777
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please remove all of my previous code and use this new custom css code at Admin -> Theme Options -> General Options -> Custom CSS.

  @media only screen and (max-width: 767px){
  body.woocommerce .has-no-sidebar ul.products li.product, body.woocommerce .has-no-sidebar .upsells.products ul.products li.product {
    width: 43% !important;
  }
  }
  @media only screen and (max-width: 479px){
  body.woocommerce .has-no-sidebar ul.products li.product, body.woocommerce .has-no-sidebar .upsells.products ul.products li.product {
    width: 100% !important;
  }
  }
  

  Thanks

  April 17, 2015 at 1:23 pm #166005
  GTS75

  Member

  Post count: 240

  That works much better! Is it possible to make it display 4 images instead of the 3 it’s currently showing?

  April 17, 2015 at 1:32 pm #166009
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Unfortunately there’s no way of controlling related products, it uses products from the same category/tags

  – Kyle

• Back to forum

  Posted in: Neighborhood