[Resolved] Button: responsive and center-aligned

[Esben]

I’ve been trying the last 3 hours to do 2 things with my CTA “Kontakt os” button on this page: http://www.entandbedre.dk

1. Align it in the middle
2. Make it responsive, both the colored area and the text within.

So far I have managed to center it, but I am not able to make it responsive. It does not scale right.

It should be pretty simple, right? What is the best GP practice for making responsive buttons?

GeneratePress 2.1.4

[Tom]

I’m not seeing it centered, but you should be able to do so quite easily like this:

<p style="text-align: center;">Your button here</p>

What about it isn’t scaling right?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Esben]

Thanks a bunch Tom. You did not see it centered because I could not figure out how to center it while keeping the responsive scaling right.

Would you have any idea why there is a stroke on the button, when I access the page from my iOS device?

[David]

Hi there,

there is this CSS that is adding a 1px border to the button – it looks the same to me on desktop or iOS

a.button,
a.button:visited,
button,
input[type="submit"] {
	border-width: 1px;
	border-style: solid;
	border-color: inherit;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Esben]

That is weird. Both in Safari on macOS and iOS I get the border around the button. The CSS you are referring to, is that standard in GP? If yes, how do I overwrite it? I haven’t added anything the likes of it.

I am able to overwrite it using this less elegant solution:

a.button,
a.button:visited,
button,
input[type="submit"] {
	border-width: 0!important;
	border-style: none!important;
}

[David]

Hi there,

check in your Additional CSS – it looks like its left over from installing a GP Site (?)

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Esben]

Thanks David, it was indeed in Additional CSS.

This is a fresh install of GP, any clue why there is a bunch of CSS in the Additional CSS?

[David]

Odd – GP doesn’t add anything to the Additional CSS. The comment at the end of the Additional CSS is what we add to the CSS that comes as part of a GP Site install.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Esben]

Strange indeed. I deleted all of it since I use the style.css in my child theme instead. Thanks for your help David, I will mark this topic as solved.

[David]

You’re welcome.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts