Support › Category: Questions › Sornacommerce theme columns issue
0 Vote Up Vote Down
jasonfeast asked 7 years ago
jasonfeast replied 7 years ago

Any extra code to make the product and categories columns equal on mobile.

11 Answers
0 Vote Up Vote Down
eDataStyle Staff answered 7 years ago

Sorry. Yesterday we got few spam posts . that’s deleted.
WHat’s issue

jasonfeast replied 7 years ago

No worries. This was from last week, do you still have the conversation?

0 Vote Up Vote Down
eDataStyle Staff answered 7 years ago

No just let me the issue so I can remember..

0 Vote Up Vote Down
jasonfeast answered 7 years ago

Sornacommerce theme woocommerce categories coming up in one column. I added the following code you sent me:  .woocommerce.product-columns-4 ul.products li.product, .woocommerce-page.product-columns-4 ul.products li.product { width: 22.05%!important;}.woocommerce.product-columns-4 .col-lg-3.col-sm-6.col-xs-6 { width: 100%!important; padding:0px!important;} This works but now the results come in one column:  http://abbottseventhire.co.uk/wordpress/?product_cat=afternoon-tea

0 Vote Up Vote Down
eDataStyle Staff answered 7 years ago

Hi
Please remove bellow

.woocommerce.product-columns-4 .col-lg-3.col-sm-6.col-xs-6 {
    width: 100% !important;
    padding: 0px !important;
}

And replace 

.woocommerce.product-columns-4 li .col-lg-3.col-sm-6.col-xs-6{
	width: 100% !important;
    padding: 0px !important;
}
jasonfeast replied 7 years ago

That makes it 4 ‘Skiny’ columns but, can the columns be the normal size: http://abbottseventhire.co.uk/wordpress/?product_cat=afternoon-tea

0 Vote Up Vote Down
eDataStyle Staff answered 7 years ago

Sorry mistake forgot to give one line more

.woocommerce.product-columns-4 .col-lg-3.col-sm-6.col-xs-6 li{
    width: 100% !important;
}/pre>
jasonfeast replied 7 years ago

Legend!! That works. If I want to change them all to 3 columns as I’ve just noticed the select option box writing goes out the frame do I change all the columns-4’s to 3??

0 Vote Up Vote Down
eDataStyle Staff answered 7 years ago

For 3 columns 

.woocommerce.product-columns-3 li .col-lg-3.col-sm-6.col-xs-6{
    width: 100% !important;
    padding: 0px !important;
}
.woocommerce.product-columns-3 .col-lg-3.col-sm-6.col-xs-6 li{
	width: 100% !important;
    padding: 0px !important;
}

And no worries we will add this css with Sornacommerce next versions ..

thanks

jasonfeast replied 7 years ago

Is this missing a line as it doesn’t work

0 Vote Up Vote Down
eDataStyle Staff answered 7 years ago

Please set 3 so we can fixed …

jasonfeast replied 7 years ago

do you mean add the last code to custom css or woocommerce columns to 3 on sorna interface.

jasonfeast replied 7 years ago

With this code all is good until the product then it goes to skinny columns

.woocommerce.product-columns-4 ul.products li.product, .woocommerce-page.product-columns-4 ul.products li.product {
width: 22.05%!important;
}
.woocommerce.product-columns-3 li .col-lg-3.col-sm-6.col-xs-6{
width: 100% !important;
padding: 0px !important;
}
.woocommerce.product-columns-3 .col-lg-3.col-sm-6.col-xs-6 li{
width: 100% !important;
padding: 0px !important;
}

jasonfeast replied 7 years ago

http://abbottseventhire.co.uk/wordpress/?product_cat=afternoon-tea

0 Vote Up Vote Down
eDataStyle Staff answered 7 years ago

Hi
Please add bellow line

.woocommerce.product-columns-4 .col-lg-4.col-sm-6.col-xs-6 li.product{
	width:100%!important;	
	padding: 0px !important;
}

.woocommerce li .col-lg-4.col-sm-6.col-xs-6{
	width:100%!important;	
	padding: 0px !important;
}

Can you please give me wp-admin user name name and password to our email ( e2getway at gmail.com ) so we can check rest and fixing all issue ..

Thanks

jasonfeast replied 7 years ago

YES YES!! that works , thanks for all the help. All looking good now.

jasonfeast replied 7 years ago

Only one small gripe is that the spacing in products on a mobile phone, the columns pushed to the side with big space in the middle.

jasonfeast replied 7 years ago

Any extra code to make the product and categories columns equal on mobile.

0 Vote Up Vote Down
eDataStyle Staff answered 7 years ago

let’s use bellow code

.products .visible-xs,
.products .visible-sm{
	display:none!important;	
}
0 Vote Up Vote Down
eDataStyle Staff answered 7 years ago

We released a new versions before update please take backup of css ..

jasonfeast replied 7 years ago

Since the theme update this week the CSS you supplied is not working when you go into the category the columns are back to being skinny. http://abbottseventhire.co.uk/wordpress/?product_cat=utah

0 Vote Up Vote Down
eDataStyle Staff answered 7 years ago

Hi
New versions released , please update

jasonfeast replied 7 years ago

Still not working with this css you sent me .

.woocommerce.product-columns-4 ul.products li.product, .woocommerce-page.product-columns-4 ul.products li.product {
width: 22.05%!important;
}
.woocommerce.product-columns-3 li .col-lg-3.col-sm-6.col-xs-6{
width: 100% !important;
padding: 0px !important;
}
.woocommerce.product-columns-3 .col-lg-3.col-sm-6.col-xs-6 li{
width: 100% !important;
padding: 0px !important;
}
.woocommerce.product-columns-4 .col-lg-4.col-sm-6.col-xs-6 li.product{
width:100%!important;
padding: 0px !important;
}

.woocommerce li .col-lg-4.col-sm-6.col-xs-6{
width:100%!important;
padding: 0px !important;
}

jasonfeast replied 7 years ago

and still ‘two skinny columns’ in mobile view