2 Product Columns on Mobile Phone

swiftideas

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.

This topic has 14 replies, 4 voices, and was last updated 6 years by Swift Ideas – Ed.

Viewing 15 posts - 1 through 15 (of 15 total)

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