Graphic on button not centering

Support
#1

Hi
I am having trouble centering images on buttons. See secure note for details. thanks!

#2

Hello @flashfog,

The image is not center because it has been reduced to 80%. And since there isn’t any setting to center the image, we need to insert a custom CSS instead. To resolve this issue, please use this:

.x-graphic-image, .x-graphic-image.x-image {
    margin-left: auto;
    margin-right: auto;
}

I went ahead and added the code. Kindly check the page now.

#3

hi. That worked. thanks!!
Question; It worked when applied to the CSS of the page (‘content CSS’), BUT It did not work when I applied it to the theme’s CSS in the customizer (‘global CSS’). What am I doing wrong?

thanks again

#4

Hey @flashfog,

I’m sorry I can’t explain because your site doesn’t load on my end. If I could see your setup, I surely could answer. I could only assume for now and my assumption is you most probably have another custom CSS in the Content CSS that affects the button’s graphics. The Content CSS has more priority than the Global CSS so the Content CSS code is taking over the Global CSS code.

image

I just want to add here that you don’t need CSS to center the Graphic and Text in the Button element,. You just need to set the Content Flexbox > Child Placement to Column and Center the Align Horizontal. I’d highly recommend that you use the Flex options of the elements where they are available. You can learn more about Flex here: https://theme.co/docs/use-flex-layout

image

Hope that helps.

#5

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