[Adrianne Tome]

How can I customize the product display for mobile view in Ashe Pro? Currently, the products are displayed in a single column, one below the other, but I would like them to appear side by side, similar to how they are displayed on a computer. How can I achieve this?

[vako]

Hi Adrianne,

 

At first, thank you for choosing our theme and service.

Actually, it’s not possible with the theme options, on the small screens 2 or more column products look small and call-to-action buttons are almost impossible to click. But we can create custom CSS snippet,s especially for you, just let us know the screen size you want them to be aligned in 2 columns. Also please share your website URL.

Kind Regards

[Adrianne Tome]

Hi,

Thanks! I would like the products to be displayed in two columns on screens smaller than 768px. My website URL is https://handmadebyadrianne.fi/.

[vako]

Hi Adrianne,

 

Please navigate to Dashboard > Appearance > Customize > Additional CSS and add the CSS snippet below:

@media screen and (max-width: 479px) {

.wc-block-grid.has-3-columns .wc-block-grid__products {

background-clip: padding-box;

display: flex;

flex-wrap: wrap;

margin: 0 -8px 16px;

padding: 0;

}

}

@media screen and (max-width: 479px) {

.wc-block-grid.has-3-columns .wc-block-grid__product {

flex: 1 0 100%;

margin-left: auto;

margin-right: auto;

max-width: 46% !important;

padding: 0;

}

}

Kind Regards

[Adrianne Tome]

Hi,

I added the CSS, but nothing changed. The products are still displayed in a single column, one below the other.

[vako]

Hi Adrianne,

 

In order to assist we need to check your website from the back end, please install this 3rd party plugin “Temporary Login Without Password Plugin” which allows us to access your dashboard without sharing access details.

To better understand how the plugin works, please watch the video guide below: https://www.youtube.com/watch?v=EMu0e78OpJo

Please make sure to mark your reply as private to hide it from the public.

Kind Regards

[Adrianne Tome]

This reply has been marked as private.

[vako]

Hi Adrianne,

 

Thank you for sharing the login details. We’ve commenced the investigation process for the issue you’ve raised. Rest assured, we’ll keep you informed of any updates as soon as they become available.

If you have any additional information or if there’s anything specific you’d like us to focus on during the investigation, please let us know.

We appreciate your patience.

 

Kind Regards

[Adrianne Tome]

Hi,

What is the sitsuatsion with this? I also need help with the image quality in the mobile view.

[George]

Hi again,

Sorry but this css works when I try on my end, please renew access and I’ll try it on your site myself.

Kind regards,
George

[Adrianne Tome]

This reply has been marked as private.

[George]

Hi again,

Sorry but sometimes we are delayed for different priority tasks, please leave access open once more so that it doesn’t close in couple of days and I’ll try to insert css myself and refine selectors if needed.

Kind regards,
George

[Adrianne Tome]

This reply has been marked as private.

[George]

Hello again,

I’ve inserted provided script in custom css and js script and it works on my end.
Please check and if further help needed contact us again:
https://prnt.sc/CwAL_gq_VdDH
https://prnt.sc/6bpfHjDvW_TD

Kind regards,
George

[Adrianne Tome]

Hi,
thank you. Yes, that looks correct in the editing view. However, when opening the website on a mobile device, the products still appear stacked.

[Author]

Posts