Return to previous page

Product View on Mobile - by hammad - on WordPress WooCommerce support

This topic has 10 replies, 4 voices, and was last updated 8 years, 5 months ago ago by Robert Hall

hammad

Participant

June 11, 2016 at 10:48

Hi Team,

Currently when I open my site on mobile, product show in two columns, I want to change settings so that my products show as one column in mobile view like you following demo.

https://www.8theme.com/demo/classico/variant1/product-category/dresses/page/2/?full_width=1

Please help

#129241 Copied Theme version: Latest WooCommerce version: Latest

9 Answers

Jack Richardson

Support staff

June 13, 2016 at 10:37

Hello,

Please provide WP Dashboard credentials in private content.

Best regards,
Jack Richardson.

#129317 Copied

hammad

Participant

June 13, 2016 at 10:55

Please also advise how do I change sidebar heading bg colour which is black at the moment?

Details are in private contents

Please, contact administrator
for this information.

#129330 Copied
Eva Kemp

Support staff

June 13, 2016 at 12:36
Hello,

I’ve added the code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.products-grid .product {
    width: 100%;
}
```
Please check the site now.

Regards,
Eva Kemp.
#129343 Copied
hammad

Participant

June 13, 2016 at 12:53

Thanks Eva, it looks perfect.

Please also advise how do I change sidebar heading bg colour which is black at the moment?

#129353 Copied
Robert Hall

Support staff

June 13, 2016 at 12:54
Hello,

Please use this code in Global Custom CSS
```
.sidebar .widget_product_categories .widget-title {
    background-color: #f11212;
}
```
Regards,
Robert Hall
#129355 Copied
hammad

Participant

June 20, 2016 at 03:44

Thank you Rob,

it worked great.

Can you please advise me how do I change font setting (color, weight etc) for different heading levels (h1, h2, h3 etc) in your theme?

Thank you

#130240 Copied
Robert Hall

Support staff

June 20, 2016 at 07:45
Hello,

In this case you can use CSS code in 8Theme Options->Styling->Custom CSS->Global Custom CSS.
```
h1{
color:red;
font-weight:bold;
}
h2{
color:red;
font-weight:bold;
}
h3{
color:red;
font-weight:bold;
}
h4{
color:red;
font-weight:bold;
}
h5{
color:red;
font-weight:bold;
}
h6{
color:red;
font-weight:bold;
}
```
Regards,
Robert Hall
#130244 Copied
hammad

Participant

June 20, 2016 at 08:08

Please check private contents

Please, contact administrator
for this information.

#130247 Copied
Robert Hall

Support staff

June 20, 2016 at 08:23
Try to add !important, for example
```
h2{
color:red;
font-weight:bold !important;
}
```
but this code will change value for all h2 tag on the site.

If you want to change it only for post title add this code in Global Custom CSS.
```
article.blog-post h2{
color:red;
font-weight:bold;
}
```
Regards,
Robert Hall
#130250 Copied
Viewing 10 results - 1 through 10 (of 10 total)