Adjust product's header size and main content position in Hestia

If your product page looks like it's taking up too much space or too little this guide will help you change the height of the product page's header and the position of the main content area.

Here's how the product page looks like by default:

First, let's change the header size. We will reduce the header by heading over to the Customizer → Additional CSS and pasting the following code:

.woocommerce.single-product .page-header {
     min-height: 430px;
     }

This is the result:

Second, let's move up the main content area to get an effect of being just under the menu. Again, we head over to the Customizer → Additional CSS and paste the following code:

.woocommerce.single-product .blog-post .col-md-12>div[id^=product].product {
    margin-top: -385px !important;
    }

This is the final result:

Note: Take into account that you might have to add CSS media queries to adjust the value for smaller width devices.