Widgets under header manage in horizontal line

Hey @masurana – first of all, this is actually related to Storefront and not WooCommerce.

Second, this can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:

/* vertical alignment widgets */

@media (min-width: 768px) {
    .header-widget-region .col-full {
        display: flex;
        justify-content: space-between;
    }
}

If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Thanks Job, it’s done.
By CSS this horizontal line is correctly adjusted. But can it possible to increase gap between these two widgets? (see screenshot – https://ijewelmart.com/wp-content/uploads/2018/11/widgetgap.jpg )
Thanks again for your support.

Hey @masurana – I’d advise you to have a look at the options of flexbox in order to try to increase that yourself. On justify-content, this is a great explanation of what it does: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-6

I’ll mark this thread as resolved now; that link should have all the tools you need. ??

Ok Job,Thanks.
I will try.