Menu close icon align bug / Product price size / Form input field styling / more

[krowest]

Dear Support team,

Just a few details before finishing up the webshop. I searched before starting this topic but couldn’t find any answer for my questions.

1. The close icon button on the mobile cart slide menu is half visible. (See screenshot 1 for explanation)

2. How to align the mobile menu text to the left instead of center (See screenshot 2 for explanation)

3. How to make the product price bigger on the product pages. I had found how to change this but that had effect on al the pages, even the homepage. What I really would like, is to make it only bigger on the single product pages.

4. Could you tell me where I could change the looks/design of the forms. It’s not possible throughout the framework right? For example I would like to make the height a lil bigger of the input field and also the border a bit darker.

5. How to center all the the ‘Global header banner’ text. I found on the forum how to do it on the homepage but I would like it to be centered on all the pages, and also for all devices (responsive). (See screenshot 3 for explanation)

6. The shipping methods are kinda messed up on the Cart page. (See screenshot 4 for explanation)

You would really help me out to finish this webshop!

Kind regards,
Krowest

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1)

.bag-product .bag-product-details {
    margin-left: 72px;
    margin-right: 30px;
}

#mobile-cart-wrap .bag-product a.remove {
    right: 15px;
}

.bag-product figure {
    margin-right: 10px;
}

2)

#mobile-menu ul li {
    text-align: left;
}

3)

.single-product.woocommerce div.product .summary h3.price {
    font-size: 24px;
}

4) You change the form border color here: Customizer -> Color – Page -> Section divide color

Where specifically do you want to make them a greater height?

5) Your text is centered:

6) Where do you see that, for me I see:

[krowest]

Thank you David,

The first 3 questions are solved!

4. I would like bigger (height +20%) input form fields on all forms. So like for the name, mobile number etc.

5. Unfortunately on mobile the content of the global header banner isn’t centered.

6. You can’t see it because you are not registered (only registered users can see prices and so the shippings options). You could make a fake account to see what I mean.

By the way sorry for al the questions but I have one more. I noticed something that wasn’t there before. The buttons of the site’s menu have different height than the menubar itself (See the screen for the explanation). Sorry for my bad English.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

4) Please test this CSS:

.woocommerce form #customer_details .form-row input {
    line-height: 50px;
    height: 50px;
}

5) Please test this CSS:

@media only screen and (max-width: 767px) {
#sf-banner-widgets .widget {
    text-align: center;
}
}

6)

.woocommerce ul#shipping_method {
    clear: both;
}

[krowest]

Hi David,

5 and 6 worked out great.

The answer on question 4 didn’t help but I changed my mind anyway. Is it possible to make the border of the form input field any smaller. I would like the border of the ‘country selector’ on all the form input fields (see screenshot for explanation).

And could you please help me with the last question in my previous reply.

Thank you! Almost done with the whole website including the details.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

4) Please use this:

.woocommerce form .form-row input.input-text {
    border: 1px solid #e4e4e4;
}

7) Please test this:

.full-center #main-navigation ul.menu > li > a, .full-center .header-right ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center .header-right div.text, .full-center #header .aux-item ul.social-icons li {
    height: 91px;
    line-height: 91px;
}

[krowest]

Number 4 worked perfectly. Thank you for that.

The last thing that is left is number 7. Unfortunately that didn’t help. The menubar is still messed up.

[David Martin – Support]

7) If I add the CSS, it works nicely:

[krowest]

Hi David,

For some strange reason it works now. I guess I did something wrong.

Thank you for all the help!!

[David Martin – Support]

Glad to help you out.

If you have found the theme/support useful, we appreciate it if you can leave feedback on our item if you have the time as it really helps us out.