Buttons not loading correctly

So I’m trying to create a new button on our home page in the mobile version. Everything looks great on when previewing it, but after saving and loading it looks awful.

ACTUAL Safari Browser iPhone Max: https://www.dropbox.com/s/ondf6uwazmqowr8/Actual.PNG?dl=0
Preview in Theme: https://www.dropbox.com/s/he1tp6pgo8qbtvk/Not%20Actual.png?dl=0

How do I get those buttons to load right?

UPDATE: Since I last posted this, I have updated the theme with the same issue.

Hi,

Please add unique class to to each button.

For example

Then add this in Theme Options > CSS

@media(max-width:479px) {
    .visit-button {
        background:#fff;
        border-width: 0px 0px 3px 0px;
        border-style: none none solid none;
        border-color: transparent transparent rgba(0,0,0,0.25) transparent;
        font-size: 1em;
        box-shadow: 0em 0.15em 2em 0em rgba(0,0,0,0.25);
    }
    .visit-button span {
        color:#a32136;
    }

    .visit-button:hover {
        background-color:#a32136;
    }

    .visit-button:hover span {
        color:#fff;
    }



    .give-button {
        background:#a32136;
        border-width: 0px 0px 3px 0px;
        border-style: none none solid none;
        border-color: transparent transparent rgba(0,0,0,0.25) transparent;
        font-size: 1em;
        box-shadow: 0em 0.15em 2em 0em rgba(0,0,0,0.25);
    }
    .give-button span {
        color:#fff;
    }

    .give-button:hover {
        background-color:#fff;
    }

    .give-button:hover span {
        color:#a32136;
    }
}

Hope that helps

Now I’m getting this: https://www.dropbox.com/s/p5txfmf4v2g2r5p/button%20problems.jpeg?dl=0

Added some padding. Looks a bit better I suppose.

Hi There,

I’m glad the custom CSS provided by Paul works, but I’d like to check your site to see what is causing that issue, because your button should have a default styling on it, unless you remove those styling intentionally.

If you don’t mind, you can provide us login credentials in a Secure note so we can take a closer look.

Thanks,

Ok believe I did it

Hi,

Kindly change the css code to this.

@media(max-width:479px) {
    .visit-button {
        background:#fff;
        border-width: 0px 0px 3px 0px;
        border-style: none none solid none;
        border-color: transparent transparent rgba(0,0,0,0.25) transparent;
        font-size: 1em;
        box-shadow: 0em 0.15em 2em 0em rgba(0,0,0,0.25);
        border-radius: 0.35em;
    }
    .give-button .x-anchor-content,
    .visit-button .x-anchor-content {
        font-weight: 700;
        font-family: "proxima-nova",sans-serif;
        text-transform:uppercase;
        padding: 0.75em 0.85em 0.75em 0.85em;

    }
    .visit-button span {
        color:#a32136;
    }

    .visit-button:hover {
        background-color:#a32136;
    }

    .visit-button:hover span {
        color:#fff;
    }



    .give-button {
        background:#a32136;
        border-width: 0px 0px 3px 0px;
        border-style: none none solid none;
        border-color: transparent transparent rgba(0,0,0,0.25) transparent;
        font-size: 1em;
        box-shadow: 0em 0.15em 2em 0em rgba(0,0,0,0.25);
        border-radius: 0.35em;
    }
    .give-button span {

        color:#fff;
    }

    .give-button:hover {
        background-color:#fff;
    }

    .give-button:hover span {
        color:#a32136;
    }
}

Please note that the code provided above serves as a guide only and is to help you in getting started. Further customization from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thank you for understanding

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