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: Atelier
• June 6, 2017 at 11:52 am #327136
  Paul Victor

  Member

  Post count: 87

  Hi,

  I was wondering if it’s possible to have 2 product columns on the mobile phone because currently, only 1 column is displayed and when a page has a lot of products, it takes quite a while to scroll to the bottom of the page.

  Many thanks!

  June 7, 2017 at 11:56 am #327380
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  Of course, in what specific pages?
  Can you provide us the different urls where you wan’t it to happen?

  Thanks

  -Rui

  June 8, 2017 at 11:11 pm #327765
  Paul Victor

  Member

  Post count: 87

  This reply has been marked as private.
  June 12, 2017 at 3:15 pm #328157
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  Please add this to Theme Options => Custom CSS:

  @media only screen and (max-width: 767px) {
  .woocommerce ul.products li.product, 
  .woocommerce-page ul.products li.product, 
  .woocommerce-page[class*=columns-] ul.products li.product, 
  .woocommerce[class*=columns-] ul.products li.product {
      width: 50% !important;
      float: left;
  }
  }

  June 12, 2017 at 9:04 pm #328287
  Paul Victor

  Member

  Post count: 87

  Thanks David, that works! The only thing this doesn’t get applied to is the product carousel. Is that possible?

  June 14, 2017 at 12:21 pm #328681
  David Martin – Support

  Moderator

  Post count: 20834

  What URL do you see that on? Can you also add a screenshot for my reference?

  Thanks.

  June 15, 2017 at 3:50 pm #328935
  Paul Victor

  Member

  Post count: 87

  This reply has been marked as private.
  June 17, 2017 at 4:49 pm #329128
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Hi Paul,

  To fix the logo, please add this CSS:

  .full-center #logo.has-img a > img {
      width: auto;
  }

  For the container size, you can add and adjust this CSS:

  @media (max-width: 1024px) {
  .single-product.page-heading-fancy .product-main {
      width: 95%;
  }
  }
  @media only screen and (max-width: 767px) {
  .woocommerce div.product.woocommerce-thumb-nav--left div.images .flex-control-nav {
      margin: 20px -15px 0;
  }
  }

  In regards to the page builder issues with the latest WordPress update, this should be resolved with the latest Swift Framework update.

  Thanks,

  – Ed

  June 19, 2017 at 7:17 pm #329350
  Paul Victor

  Member

  Post count: 87

  This reply has been marked as private.
  June 22, 2017 at 1:30 pm #329724
  David Martin – Support

  Moderator

  Post count: 20834

  1) To change the mobile carousel column count you would need to edit the file js/functions.js. Locate line mobileCarouselItems = 1; and change that to mobileCarouselItems = 2;. You must have the Perforamnce Options set to disabled to pull in this change.

  2) The style should be the same, if there are more then 4 items the carousel should then enable you to scroll left/right. What theme version are you on?

  3) In your child theme, you have added a 75px top/bottom padding:

  

  4) No, not by default. Have you added the slide Overlay Opacity setting?

  5) That looks to be the standard layout for the fullwidth shop + a sidebar. What layout are you expecting to see?

  6) It looks like you have some custom CSS for those image banners also. But you could also try:

  @media only screen and (max-width: 767px) {
    .spb-row[data-col-spacing="40"] .spb_content_element {
      padding-left: 0;
      padding-right: 0;
    }
  }

  June 22, 2017 at 11:07 pm #329807
  Paul Victor

  Member

  Post count: 87

  This reply has been marked as private.
  June 26, 2017 at 9:47 am #329997
  David Martin – Support

  Moderator

  Post count: 20834

  1) It would not. Adding the J file to the child theme would not override it.
  You’d need to deregister the parent theme JS file and then enuque the new JS file in the child theme. Ref:

  2) The theme is set to pull in 12 related items, if available – do you have more then 4 items under the same category?

  5) The layout is correct:

  

  Do you refer to the verticle differences on the product items, that looks to be caused because the title of some items are on two lines, rather then one.

  June 27, 2017 at 11:20 am #330158
  Paul Victor

  Member

  Post count: 87

  This reply has been marked as private.
  June 29, 2017 at 10:58 am #330502
  David Martin – Support

  Moderator

  Post count: 20834

  1) You would do this via your child theme, in the child theme functions.php. This post details the exact required code very well: https://stackoverflow.com/a/29193637/4034148

  2) You would added this to the child theme functions.php file. For me this is working nicely on my dev version.

  function jk_related_products_args( $args ) {
    $args['posts_per_page'] = 8; // 4 related products
    return $args;
  }
  add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args' )

  5) The hight is variable for each product. You could look to set a min height for all products but this would create a satifactory layout for all screensizes I’d think. Concerning the layout of the sidebar – I’d like to run this past Ed for his thoughts.

  Thanks,
  David.

  June 30, 2017 at 12:07 am #330592
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Hi Paul,

  Regarding 5), what you see is the only possible layout using the isotope JS script that we use to arrange the sidebar within the shop items. The best thing I can advise is to set custom CSS to fix the heights for certain viewports, to adjust this display to your liking. We can assist to a certain point with this – how good is your knowledge of CSS?

  Thanks,

  – Ed

• Back to forum

  Posted in: Atelier