Help with positioning

This topic has 17 replies, 3 voices, and was last updated 5 years, 5 months ago by Artem Temos.

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
July 10, 2019 at 10:37 am #132117
newK9
Participant
Hi Xtemos, I was wondering how would I position the submit button on my contact form 7, form to be inline like the picture. Currently it overlaps the recaptcha. The code below is how I positioned it so far.
```
<div class="row">
<div class="col-md-6" style='margin-bottom:20px;'>[recaptcha]</div>
<div class="col-md-6" style='margin-bottom:20px;'>[submit class:btn-color-black "SEND MESSAGE"]</div>
```
Attachments:
You must be logged in to view attached files.
July 10, 2019 at 12:46 pm #132162

Elise Noromit
Member

Hello,

Please provide page URL with the form. If your site is under maintenance, please provide your site admin access to the private area.

Best Regards

July 10, 2019 at 10:33 pm #132236

newK9
Participant

Hi. Thank you for your reply, I’ve now fixed it. I was wondering if you could help me further with something else please.

1) How do I remove the header background image for search. I’ve removed it for all page headers but cannot find a way of changing it here bizarrely. (image below)

2) How do I align text and a popup theme element as a HTML Block. Currently it’s aligning very odd at the moment. Could you advise me in how to deal with this the correct way.

Our local stores [html_block id="2696"]

3) How can I disable the SKU field only on product pages though.

Attachments:
You must be logged in to view attached files.

July 11, 2019 at 7:52 am #132280
Elise Noromit
Member
Hello,

Please provide your valid site URL and page URL with issue 1 and 2.

Add this code to the Theme Settings > Custom CSS > Global:
```
.single .meta-location-add_to_cart .product_meta>span.sku_wrapper {
display:none;
}
```
Best Regards
July 11, 2019 at 9:40 am #132291

newK9
Participant

I’ve included the details below. The sku has been removed with your code thank you.

July 11, 2019 at 2:02 pm #132319

Elise Noromit
Member

Hello,

Please specify step by step what I should do to reproduce the problem https://gyazo.com/788fa2bf46c1d01d344f61034df38698 seems it was a matter of cache.

You need to include the text into HTML block https://gyazo.com/5ad390d2748644c33f028c235ea8fc68 add a text block and insert http://prntscr.com/odngxj

Best Regards

July 11, 2019 at 2:20 pm #132321

newK9
Participant

Hi, thank you for your message back

Sorry if you go to search and put in a, — Allow the search box to load bringing up results — scroll down to get the view all results and you will see where the background image is at the top.

I’ve done what you’ve said but get this (image shows) they are massively far apart.

Best regards

Attachments:
You must be logged in to view attached files.

July 11, 2019 at 8:29 pm #132359

Elise Noromit
Member

Hello,

Enter the shop page and remove the background on the title or change it. The Search results page inherits the settings of the Shop page.

Best Regards

July 11, 2019 at 11:42 pm #132382

newK9
Participant

Hi Elise. Thank you for that was bugging me for a while but so easy and simple in the end.

I’m still having problems with my question 2 from above.

2) How do I align text and a popup theme element as a HTML Block. Currently it’s aligning very odd at the moment. Could you advise me in how to deal with this the correct way. The area affected is the area classed as after ‘add cart area’

I’ve followed what you said but get this (image below), they are massively far apart. How would I get them to being closer like image two?

Best regards

Attachments:
You must be logged in to view attached files.

July 12, 2019 at 7:50 am #132404

Elise Noromit
Member

Hello,

Make the columns narrower and align the text and the button of the popup to left and to the right accordingly.

Best Regards

July 12, 2019 at 1:43 pm #132442

newK9
Participant

Hi Elise,
I’ve tried all that and I’m still facing problems with it. On mobile/tablets it’s appearing on separate rows (image). Also it isn’t centred on desktop either.

Attachments:
You must be logged in to view attached files.

July 13, 2019 at 6:27 am #132509

Elise Noromit
Member

Hello,

Set 1 column width for both: text and popup https://wpbakery.com/video-academy/responsive-column-control-width-offset-param-usage-explained/

Best Regards

July 14, 2019 at 11:51 pm #132664
newK9
Participant
Thank you all sorted now.

Could you please advice me in how to work this, I’m trying to make a link in short description to open or navigate down to the Shipping & Delivery tab also known as the ‘woodmart additional tab’. I’ve tried with the code below but having some trouble getting it to work.
```
jQuery('.openTabBtn').on('click', function( e ){
	e.preventDefault();
	jQuery('.woodmart_additional_tab > a').click();
    jQuery([document.documentElement, document.body]).animate({
        scrollTop: jQuery(".woodmart_additional_tab").offset().top
    }, 500);
});
```
Then adding the link element

<a href="#" class="openTabBtn">Shipping & Delivery</a>
July 15, 2019 at 5:54 am #132668

Artem Temos
Keymaster

Yes, this code should work. Do you have problems with that? Send us a link to the page where we can see it.

July 15, 2019 at 12:32 pm #132734

newK9
Participant

Hi Artem,
Yeah, the code does seem to function but if you replace it with the additional tab it works. Any ideas why it isn’t?

July 15, 2019 at 1:35 pm #132759
Artem Temos
Keymaster
Try to use this one instead
```
jQuery('.openTabBtn').on('click', function( e ){
	e.preventDefault();
	jQuery('.woodmart_additional_tab_tab > a').click();
    jQuery([document.documentElement, document.body]).animate({
        scrollTop: jQuery(".woocommerce-Tabs-panel--woodmart_additional_tab").offset().top
    }, 500);
});
```
July 15, 2019 at 2:08 pm #132769

newK9
Participant

Worked like a dream thank you.

Can you do the same thing with regards to the above but attach it to a button doing the same just not as just text?

Attachments:
You must be logged in to view attached files.

July 16, 2019 at 6:03 am #132857

Artem Temos
Keymaster

Add the following CSS classes to that button openTabBtn btn btn-color-primary btn-style-link btn-shape-rectangle btn-size-extra-small
Author

Posts