Docs

[pdopchev]

Hi guys,

Trying to center a custom button in the column it is located. Right now it looks center because I added 5% padding on top but when the browser window is resized that’s not the case.

link: http://www.dopchevproductions.com/test/skis/

The code for the button is:

<div class="x-btn-regular x-btn-block x-btn-x-large">
<a href="#my-content" class="product_lightbox x-btn" data-content="Launch form!" data-type="inline">Skier Form</a>
</div>
	
<div id="my-content" style="display: none; width: 1200px;">
[contact-form-7 id="1024" title="Skier Form"]
</div>

[lightbox selector=".product_lightbox"]

Your help would highly appreciate it!

[Christopher]

Hi there,

Please check provided URL, it displays 404 error.

Thanks.

[pdopchev]

My bad, the correct one is: http://www.dopchevproductions.com/test/custom-skis/

[Lely]

Hello There,

Thank you for the correct URL.
Please add this code first on Appearance > Customize > Custom > Edit Global Javascript:

jQuery(document).ready(function($) {
	var max = 0;
	$(".page-id-351 #x-section-1 .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(".page-id-351 #x-section-1 .x-column").css('height', max);
});

Then add class vertical-align on the column’s class field where the button is. Then add the following CSS on Appearance > Customize > Custom Edit Global CSS:

.vertical-align{
  position:relative;
}
.vertical-align .x-btn{
 position: absolute;
    top: 50%;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-50%);
    max-width: 80%;
    left: 0;
    right: 0;
}

Hope this helps.

[pdopchev]

Hi, that helps a ton! Thank you so much for the code!

I did notice an issue when screen size goes to 767px or smaller – the button moves underneath the column. Any suggestions on that?

Also, I did change the provided CSS code to center the button because it was appearing in the middle of the top red line. The code I am using at the moment is:

.vertical-align{
  position:relative;
}
.vertical-align .x-btn{
 position: absolute;
    top: 50%;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(100%);
    max-width: 80%;
    left: 0;
    right: 0;
}

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 767px){
.vertical-align .x-btn {
    position: relative !important;
    transform: none !important;
}
}

Let us know how this goes!

[pdopchev]

Great! That does the trick!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts