Products dont arrange properly when resizing window

Hi there,

Thank you for writing in,

If you check the demo of the theme, you will find no difference in display in terms of responsiveness. However, the number of products that you want to display in the shop product can be done. Please follow the given instructions below to implement the changes in the site.

Suppose, If you want to display 3 products in each row then the following shortcode can be added in the shop page:

[recent_products per_page=”12″ columns=”3″]

If you have any further queries,do let us know. we will assist you the best we can.

Regards!
Suvechchha Subedi
AP Support Team

thanks for responding.

1. is there a way to change @media screen and (max-width: 992px in assets/css/responsive.css to 900 (or change the width the columns change from 3 to 2) with css from Additional css tab so i wont have to modify the file every time i update the theme? or is there any other way to accomplish the same thing without modifying the file?

please excuse the layman’s terms bellow..

i think that the problem was the nth-child(3n)identificator (or whatever it is) would not change to nth-child(2n) so it would be formatted as the end of the row (3rd product) even after the layout changed to 2 products (columns) / row

the workaraund:

i added to additional css in customizer (modified the resolution at which the woocommerce formatting kicks in to 900px)

@media only screen and (max-width: 900px){
.woocommerce ul.products[class*=columns-] li.product:nth-child(2n),
.woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n) {
float:right !important;
clear:none !important
}
}

from ~900px and 992 there is some other formating that takes priority or gets into conflict with this so i couldnt change the above width to more than 900 that’s why i had to also change:

the width when the theme changes from 3 columns to 2 to the same 900px in assets/css/responsive.css

i changed 992 to 900 on this line @media screen and (max-width: 992px

this might be a very stupid fix but i’m not a programmer and i cant say i understand exactly what and why happened, but it does seems to work

• This reply was modified 5 years, 2 months ago by alex.lulu.
• This reply was modified 5 years, 2 months ago by alex.lulu.

Hi there,

Thank you for writing in,

It seems like you have changed the product display into 3 columns.This might be reason for creating issues in the design and layout of the product display. Could you please change the 3 column product display into 4 columns. After then if the problem still encounters the display width then do let us know. We will provide you with an appropriate solution to fix it.

Regards!
Suvechchha Subedi
AK Happiness Engineer

thank you for answering.

i don’t remember changing the product display to 3 columns and i can’t find an option anywhere to do this.
also it doesn’t look like i’ve changed anything in style.css or functions.php.

the only thing i remember changing in the theme is the responsive.css file mentioned above (to fix the problem)..

the additional css from the customizer does not change the number of columns either (the issue is there without any additional css) and my Shop page is empty (the shortcode above didn’t seem to work properly)

if there’s an option in the admin page for this that i might have enabled without realizing it, i can’t find it now..

Hi there,

Thank you for writing in,

It seems you might be having some confusion about where to use a shortcode on the page.Please check the screenshot attached below for your convenience.
https://prnt.sc/p5n5mp

After you have used the shortcode, please provide us the link of the page if the problem still persists. We will assist you the best we can.

Regards!
Suvechchha Subedi
AK Happiness Engineer