Big Gap between top menu and product photos

[Sandy Tsoi]

There is a big gap between the top menu and the product photo on web-based device but not mobile device. How can i remove the big gap??

bosu.freeofficesolutions.com/?product_cat=packs

This problem appears on all product pages under online menu.

Sandy

[Forum Moderator]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

.tax-product_cat .page_head, .tax-product_cat .post_head { height:auto !important;}
body.woocommerce-page #content { margin-top: 80px;}

Regards,
Dave

[Sandy Tsoi]

Thanks Dave, it works,

However, I found some of the product page has below problem. The ‘related product’ text font is too big. But some of the product pages don’t have this problem?

Also, may I know how to make the top menu background color? I made changes on the customise area but it doesn’t work on those page generated by woocommerce.

Sample page: bosu.freeofficesolutions.com/online-menu/teriyaki-beef-bento?v=6cc98ba2045f

[Forum Moderator]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

section.related.products {
    float: left;
}
body.woocommerce-page .header {
    background: rgba(2,2,2, 1) !important;
}

Regards,
Dave

[Author]

Posts