restrict the product content width in product page

[Anonymous]

Hey there,

 

Please check out the attached image, it's one of our product pages.

1. I would like the top bar, the black and pink menu bar go across full screen , like how it is as the attached image. This format needs to be applied on all our product pages.

2. And the product information goes within the blue box.

Please apply the above 2 features on all our product pages.

This will provide a better UI, and most importantly, our images will not be distorted.

Please fix it for me ASAP. Thanks

 

 

Add New Note to this Reply

[Anonymous]

another problem is how to increase the width of the product page container?

Add New Note to this Reply

[Jackie]

Hello.

With header full width, we also have an option at theme option. This is header navigation layout config, you can see my image link

http://prntscr.com/cuttlo

With product container, please use default option in each page product. It will get an option from theme option. If you choose an option for each page, it will overwrite config at theme option.

http://prntscr.com/cutr2g

And with product page container, you can add custom CSS to do it. Example, you want to width 1400px

.container {

with: 1400px;

}

Check it and let me know if you have any question.

Regards.

Jackie.

Add New Note to this Reply

[Anonymous]

hello, where can I set the custom CSS? I try to input the CSS code by "edit CSS" in appearance section, but turn out it dismisses the width setting.... left with teh code below...

.container { }

Add New Note to this Reply

[Anonymous]

?

Add New Note to this Reply

[Jackie]

Hello.

No, you can add custom CSS at theme options/ custom CSS as my image link below

http://prntscr.com/cuzuop

Regards.

Add New Note to this Reply

[Anonymous]

btw, how can I use bigger font size for the content?

Add New Note to this Reply

[Jackie]

To change font size for body/ heading, please go to theme options/ typography tab, you will have the config for font style/size for this theme. But remember click Save & Generate CSS button again.

Regards.

Add New Note to this Reply

[Anonymous]

I changed the body font size, but the product page font size are not effected, how can I change the font size of the product page?

Add New Note to this Reply

[Jackie]

Hello.

Can you help me add this custom CSS on theme options to change your font-size? I can't add this code to your site.

.site-content-single-product .single-product-info .summary-product-wrap .product-single-short-description {

font-size: inherit;

}

.woocommerce div.product .woocommerce-tabs #tab-description {

font-size: inherit;

}

Regards.

Add New Note to this Reply

[Anonymous]

thx , it works

btw, how can I change the font color of description? and how can I change the text hover color of the footer?

Add New Note to this Reply

[Tracy Bui]

Hi again,

We are so sorry for late reply. We have a weekend.

We have got access to your website but it doesn't work.

Please give us again your website's URL and admin account privately and give us exactly the links or the images which describe your questions. We will help you to check.

Best Regards,

YoloTheme

Add New Note to this Reply

[Anonymous]

This reply has been marked as private.

Add New Note to this Reply

[Tracy Bui]

Hi again,

You can add this Custom CSS segment on Theme Options > Custom CSS & Script > Custom CSS:

.yolo-footer-wrapper.footer-4 .wpb_wrapper .wpb_wrapper .wpb_wrapper ul.custom-list li a:hover, .yolo-footer-wrapper.footer-3 .wpb_wrapper .wpb_wrapper .wpb_wrapper ul.custom-list li a:hover{

color: #c84463;

}

Note: change for your suitable color.

Best Regards,

YoloTheme

Add New Note to this Reply

[Anonymous]

thx it works,

moreover,

1) when I hover over the header's wishlist and cart icon, it turns to black color which are same as the header background color, how can I change the icon hover over color?

2)  how about if I wanna change the color of the mobile header background?

Add New Note to this Reply

[Author]

Posts