[Resolved] Why Doesn’t the Advanced “CSS Classes” work on my buttons?

[Oisin]

Hi there,

I’m sure I’m missing something obvious, but when I set up a .button class in the customizer and then add the class name to button block no styles are picked up. Is this normal?

Many thanks

[Elvin]

Hi Oisin,

Can you provide us link to your site? So we could check what might be going wrong.

Perhaps this may be a simple syntaxing issue. # is used for css ID selectors meaning it is used if the html attribute used is id="button.

If you’re using the class attribute, you must use .button { ... } instead of #button { ... }.

Let us know if it helps.

[Oisin]

Hi, I’m going to try one or two things and get back to you

[Elvin]

I’ve checked your site and saw multiple orange buttons (form submit button & WPSP read more buttons) that have different CSS classes.

Can you specify which ones?

For the “read more” button, you’ll have to use these CSS selector/s:

.show-posts-button { ... }

For the orange submit button, you’ll have to use these CSS selector/s:

form.fluent_form_2 .wpf_has_custom_css.ff-btn-submit { ... }

[Oisin]

Thanks, I’m ok with using selectors but was wondering why that CSS Class field doesn’t override all other styles. It kind of takes away from the convenience. If I add a button using GenerateBlocks the little advanced field doesn’t seem to work, I still have to use the selectors. Maybe this is normal?

One other thing, if using the GenerateBlock Grid, how do I make sure the image in the right column disappears leaving only text when the viewer looks at the page on mobile or tablet. Is this easy to implement? Thanks for your help.

[Elvin]

Thanks, I’m ok with using selectors but was wondering why that CSS Class field doesn’t override all other styles. It kind of takes away from the convenience.

If you want your class selector’s CSS code to take priority over its sibling class selector, you must add !important to its CSS properties. ex: “background-color: red !important;”

…If I add a button using GenerateBlocks the little advanced field doesn’t seem to work, I still have to use the selectors. Maybe this is normal?

GenerateBlocks’ Advanced field works. Perhaps you maybe adding the class on the wrong element/container or there’s a css syntaxing issue.

Here’s a demo on how to use it on buttons.
https://share.getcloudapp.com/eDuBbDwp

One other thing, if using the GenerateBlock Grid, how do I make sure the image in the right column disappears leaving only text when the viewer looks at the page on mobile or tablet. Is this easy to implement? Thanks for your help.

You can try assigning a CSS class name to your right column via Advanced > CSS Classes field and add this CSS code:

@media (max-width:768px){
.your-classname {
display: none;
}
}

[Oisin]

Cheers for all the great info. GeneratePress support is amazing.

I’m not a fan of using !important but thanks for the suggestion.

I’ll try the CSS you suggested… One last thing.

The grid columns don’t stack on mobile. The image and text stay side-by-side and look pretty bad. How do I make them stack? Image then text or vice versa.

There must be a setting I’m not seeing in GenerateBlocks

[David]

Hi there,

you can set the individual Grid item widths for Tablet and Mobile – by selecting each grid item and changing the settings tab to tablet / mobile. To make them stack set them to 100% width.

You will also see an Order field on tablet and mobile settings, which will allow you to change the order they are displayed. eg. Left grid item: 2, Right grid item: 1 for Mobile will place the Right Grid item on top.

[Oisin]

Thank you, David. I knew it was something simple.

[David]

You’re welcome.

As an aside – we’re looking at integration of theme and block styles for buttons. So something for the future to make that easier

[Author]

Posts