Home Forums Meteorite Second Button

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Terra Themes 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1045

    areifsnyder
    Participant

    Greetings —

    Trying to change the css code for the second button. I would like it to be the same color and font as the first. Currently using the following for the first.

    .parallax-text .meteorite-button {
    font-size: 1.75rem;
    font-weight: 600;
    }

    #1046

    Terra Themes
    Keymaster

    Hi,

    the CSS class you need for the second button to work is the following

    .parallax-text .meteorite-button.border.

    So your CSS code should look like

    .parallax-text .meteorite-button,
    .parallax-text .meteorite-button.border {
    font-size: 1.75rem;
    font-weight: 600;
    }

    In order to get the same color use this CSS

    .parallax-text .meteorite-button.border {
    background-color: #337ab7;
    border: 1px solid #337ab7;
    color: #fff;
    }
    .parallax-text .meteorite-button.border:hover,
    .parallax-text .meteorite-button.border:focus {
    background-color: transparent;
    color: #fff;
    }

    Please let me know if this is what you’re looking for.

    #1047

    areifsnyder
    Participant

    Amazing! Thanks so much. Any way I cam make it the same color as well and not the opposite?

    #1048

    Terra Themes
    Keymaster

    The last code I wrote should apply the same color to the second button.

    This one from above:

    .parallax-text .meteorite-button.border {
    background-color: #337ab7;
    border: 1px solid #337ab7;
    color: #fff;
    }
    .parallax-text .meteorite-button.border:hover,
    .parallax-text .meteorite-button.border:focus {
    background-color: transparent;
    color: #fff;
    }
    #1049

    areifsnyder
    Participant

    Amazing. Thanks so much. Last thing, I promise. Love the buttons and overlaying quotes on the web version. However, they block the photo on the mobile version. Any insight to make this look better or anyway to delete the buttons and quotes only on the mobile version.

    Thanks again! We love using this theme.

    #1050

    Terra Themes
    Keymaster

    You’re welcome!

    I don’t know exactly what you mean with the quotes, but I guess you mean the header image text.

    You could remove all header image content for mobile devices with the following CSS:

    @media only screen and (max-width: 991px) {
      .parallax-text {
        display: none;
      }
    }

    Or you could just remove the buttons:

    @media only screen and (max-width: 991px) {
      .parallax-text .meteorite-button,
      .parallax-text .meteorite-button.border {
        display: none;
      }
    }

    I would really appreciate if you take a few minutes and leave a rating on wordpress.org about Meteorite 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.