[Resolved] Button: responsive and center-aligned

Home Forums Support [Resolved] Button: responsive and center-aligned

Home Forums Support Button: responsive and center-aligned

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #677256
    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
    #677343
    Tom
    Lead Developer
    Lead Developer

    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?

    #679797
    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?

    #679877
    David
    Staff
    Customer Support

    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;
    }
    #680806
    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;
    }
    #680976
    David
    Staff
    Customer Support

    Hi there,

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

    #681077
    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?

    #681086
    David
    Staff
    Customer Support

    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.

    #681846
    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.

    #681925
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.