CSS for button alignment

Support
#1

Hi!

I have a layout fot the button alignment with the color boxes . Please see it here: http://demo.finnguru.fi/wp-content/uploads/2019/01/Näyttökuva-2019-1-22-kello-16.09.03.png

And this is how it look now. I almost get it working with CSS, but not…can you please let me know the perfect CSS for the alignment:

http://demo.finnguru.fi/

Thank you!

#2

Hi Anni,

Thanks for writing in! Your referenced link is pointing to a 404 page.

However, if you’re referring to the following section.

You can place the Gap element in your Cornerstone builder (place it above your buttons) to align your buttons accordingly.

Hope that helps.

#3

Hi! Nice tip the gap, but it does not make what I am looking for. Let’s try again the example:
http://demo.finnguru.fi/wp-content/uploads/2019/01/Näyttökuva-2019-1-22-kello-16.09.03.png

#4

Hi There,

Please try adding the my-button class to your buttons:

After that, add this custom CSS under Theme Options > CSS:

a.x-anchor.my-button.x-anchor-button {
    position: absolute;
    bottom: 25px;
    transform: translateX(-50%);
}

Hope it helps :slight_smile:

#5

Yes, I got it working now: http://demo.finnguru.fi/ in the desktop version, but responsivity is not working. The buttons get under the other box in the mobile. Any ideas for that. I fixed the CSS that the bottom is bottom: -20px;

#6

Hi There,

Please also add this custom CSS for mobile:

@media (max-width: 767px){
    a.x-anchor.my-button.x-anchor-button {
        bottom: 15px;
    }
}

Hope it helps :slight_smile:

#7

Great! It seems working :slight_smile:

More button questions. Please see the page: http://demo.finnguru.fi/tuotteet-2/
Can I some how make the buttons e.g. Marian Lasikierros and Puotikierros been vertical aligned, on the top each other? I have find a way to make them only horizontal. Rows does not working inside the column.

#8

Hi,

Try to add a gap element between your buttons to make the other one appear on the next line.

Thanks

#9

The button css does not work nicely in all the pages, look: http://demo.finnguru.fi/tuotteet-2/, the button is now on the top of the text. I have the CSS on the Theme Options, should it be on the page?

I have tried to move it with marginal and padding, but not help.

#10

Hi Anni,

That CSS will only work on a specific setup, placing it on other content that different dimensions and length will be different. But I’m not sure why you’re aligning it on that page when it’s already centered, here is the example as I removed the my-button class.

Any margin and padding will not help since it has an absolute position. It would require more CSS for every setup that you wish to implement it.

Thanks!

#11

If you check my front-page, you see the button has been aligned kind of a border of the box, like this layout image from the designer: http://demo.finnguru.fi/wp-content/uploads/2019/01/Näyttökuva-2019-1-22-kello-16.09.03.png

The Klikkaa Kauppaan button should be also like the three buttons on the front page.

#12

Hi Anni,

The link of your screenshot image is not working anymore.

Please try adding the 35px to the bottom margin of your text element above the bottom:

Hope it helps :slight_smile:

#13

Here is the layout how the all the button should be on the page: http://demo.finnguru.fi/wp-content/uploads/2019/01/Näyttökuva-2019-1-22-kello-16.09.03.png

Hope you are able to see the image now.

#14

Hi Anni,

Sorry for the confusion!

Please add this element CSS to your column contains the `` button:

$el a.x-anchor.my-button.x-anchor-button {
     bottom: -65px !important;
}
@media (max-width: 767px){
    $el a.x-anchor.my-button.x-anchor-button {
        bottom: -88px;
    }
}

Hope it helps :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.