alex.lulu

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..

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.

i cannot modify the margin value of elements. i can change the padding but not the margin on all elements with margin-bottom: 4.236em;.

example:

.woocommerce-breadcrumb {
margin-bottom: 0.236em }

does not change the margin from original value (4.236em).
i also changed the margin atribute in the parent css directly but the original value does not change when loading the page.

might be some simple thing i am missing.
please help