Custom Button size

[stevepork]

HI,

I’m trying to set custom button sizes, but the options don’t work as I’m expecting.

I wish for the button size to be 700px x 63px, and fit to size with fair padding when the display size is smaller, such as on a mobile.
I’ve set the size to 700x63, but the button just fits to the size of text - it works as expected when setting minimum size, until viewed on a small screen.

I’m not using the legacy button tool.

Can you help with this?

Thanks,
Steve

[prakash_s]

Hello @stevepork

Thanks for writing to us.

Go to the Button element and add a custom class for example your-custom-class

Now add this custom CSS code into your X/Pro —>Theme Option —>CSS

@media(max-width:480px){
a.your-custom-class.x-anchor.x-anchor-button {
min-width: 100%;
}
}

Please feel free to change the custom class name but please make sure that if you wish to change the custom class name you need to change the class name(your-custom-class) from the custom CSS code as well.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[stevepork]

Thanks, that looks pretty good, but there’s no padding on mobile view.

How can I embed it into the element CSS? I’ve given the following a go:

@media(max-width:480px){
a.$el {
min-width: 100%;
}
}

[tristup]

Hi @stevepork,

You need to write it to the specific element’s content CSS section, please find the screenshot describing settings.

Hope it helps.
Thanks

[stevepork]

You haven’t given me any information that has been useful.

Why can’t I use it in the elements CSS? I have the rest of the buttons customisation CSS in there

[tristup]

Hi @stevepork,

You can use both of the options and will work the same way.

Thanks

[stevepork]

I replied explaining targeting $el doesn’t work in the element css - can you provide me with a snippet that will?

[ruenel]

Hello @stevepork,

Adding this custom inline CSS in the button element settings should have work:

@media(max-width:480px){
  $el.your-custom-class {
    min-width: 100%;
  }
}

If this is not working, you might be inserting an invalid character or a broken CSS code. provide us access to your site so that we can check your code and settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works


Best Regards.

[stevepork]

Hi Ruenel,

Thanks for your help, the snippet I was looking for I think was:

@media(max-width:480px){
  $el.x-anchor-button {
    min-width: 100%;
  }
}

This works perfectly for the homepage, but not the attached page. Would you be able to help me with this one too, I’m not sure what’s different other than the minimum width being set to 525px x 63px.

Kind Regards,
Steve

[tristup]

Hi Steve,

In inner pages, the margin of the button is set to 1em 3em 0em 3em whereas the margin in home page is 1em 0em 0em 0em, and that is the reason behind the problem. I would suggest you reset the margin of the buttons on the inner page to get rid of the issue.

Home Page Screenshot:

Inner Page Screenshot:

Hope it helps.
Thanks

[stevepork]

Thank you, that’s appreciated.

The issue that follows is that the buttons then appear next to each other when I’d like them to appear in the row - I found the padding resolved that issue.
How would I avoid this happening?

Kind Regards,
Steve

[marc_a]

Hi Steve,

To avoid that thing to happen is that you should set the min-width to 100% because if you are going to set the fixed min-width like 525px tendency the button had a responsive problem with the smaller devices.

Hope that helps.

Thank you.

[stevepork]

Alright, so how would you suggest I fit the button to 525px, each button being on a row, whilst having the ability for the button width to shrink on screen sizes smaller than 525px?

I don’t believe that should be complicated at all, I just feel like X isn’t respecting my width setting, so I’m forced to use min-width.

[tristup]

Hi Steve,

To adjust the button width in 480px to 600px, you need to add the following custom CSS code into the Element CSS of the specific element.

@media screen and (max-width: 600px) and (min-width: 480px) 
{
    $el.x-anchor
    {
        min-width:100%;
    }
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[stevepork]

Thank you. Much appreciated.

[prakash_s]

You are welcome @stevepork