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, 7 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)