Targeting Button Shortcode

Good afternoon,

I have created a button on every product in /condo-intel/ labeled “Sample of Detailed Condo Intel.” I have set up class dhrl-btn but cannot change the margins around the button. Could you please assist? Right now the only way I have space set between the two buttons is because one of the buttons is entered via shortcode and I was able to use the text editor to add a paragraph entry after it. I would like a 25px margin between the buttons.

The buttons I am referring to can be seen in this screen capture: https://prnt.sc/k7mqut.

Thank you,
J

Hello J,

The issue is because of CSS specificity. There are set default margins on buttons that has higher specificity than the class. To add 25px bottom margin please add !important so it will override default bottom margin. See this screencast: https://screencast-o-matic.com/watch/cFiFfRF5qz

.dhrl-btn {
    background-color: rgba(0,0,0,.8);
    color: #ffffff;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2.5px;
    padding-bottom: 9px;
    border: none;
    margin-bottom: 25px !important; /*Add this line on your current custom CSS for this class*/
}

CSS specificity is a broad topic. Please check this article.
To understand the use of !important, see this article.

Hope this helps.

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