Theme is overwriting !important tags in css

Support
#1

On the homepage of dev.valeonetworks.com I have a button(http://prntscr.com/ncakyo) that seems to keep getting settings like it’s color overwritten from the class .e427-24.x-anchor .x-anchor-text-primary even though I’m using !important in the css and I can see when I inspect it that it’s showing up, it’s just crossed out.

Why is a non important setting overwriting my !important setting?

Thanks!
Ryan

#2

Hello Ryan,

Thanks for writing in!

You have this custom css for your button:

.e427-80.x-anchor .x-anchor-text-primary {
    text-align:center;
    color:rgba(0,0,0,1);
}
.e427-24.x-anchor .x-anchor-text-primary {
    color:rgba(255,255,255,0);
}

And you also have this code which happens to be applied in the button:

.ghost-button {
    display: inline-block;
    width: 400px;
    padding: 8px;
    color: white !important;
    border: 4px solid black;
    text-align: center;
    outline: none;
    text-decoration: none;
    margin: 30px !important;
    border-radius: 0px !important;
    font-size: 25px !important;
    font-weight: 700 !important;
}

The first code were added first and then second one plus the color has an !important in the attribute which make it as a priority.

Hope this explains your issue briefly.

#3

Correct, thats the information I provided in my question but I don’t see a solution.

The first block is from x theme and the second block is mine.

Why is a non important setting overwriting my !important setting?

Thanks,
Ryan

#4

Hello Ryan,

The color: white !important; in the “.ghost-button” block were not being prioritized because of the css class specificity. To fully understand it, please check out these links:

Hope this helps.

#5

Thanks, I read through those and tried to resolve by increasing specificity and making it an ID instead of class but it didn’t seem to make a difference.

Can you please tell me how to resolve this specific issue?

#6

Hey Ryan,

To make sure your code works, please add the following code as well:

#ghost-button span.x-anchor-text-primary {
    color: inherit;
}

With the above code your CSS should work as expected.

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#7

That code did the trick thanks!

I found a similar issue with the button and I’m not sure if it’s related. I have a display:flex being applied to the div the button is inside and things like justify content are working fine.

However I’m trying to get the button of each container to float to the bottom by using align-self: flex-end; and for some reason it’s not taking.

Any ideas?

#8

Hello Ryan,

Thanks for updating the thread.

Well flex-end should work. Can you share the specific page URL for us to take a closer look?

Thanks.

#9

Same website that I posted on the first post of this thread, dev.valeonetworks.com.

You can see here the buttons acting weird and the headers not even floating to the top for some reason, which makes even less sense: http://prntscr.com/nd7hqp

#10

While we’re at it, it doesn’t seem like any content on the right will listen to flex-start either: http://prntscr.com/nd96jc

No matter what settings I add, everything just vertically groups itself together.

#11

Hi Ryan,

The columns aren’t a flex container so your buttons will not aligned according to flex alignment. Plus, that flex option is only applicable within the structure of the button aligning whatever within it like text and graphics.

In standard column layout, vertical alignment is always controlled by the amount of content and the reason your buttons aren’t aligned vertically is due to amount of text above it. Please make those texts with equal amount.

And with right and text alignment, yes, flex will not work. Columns uses standard text alignment and not flex alignment unlike header and footers.

Thanks!

#12

Hey Rad,

I changed the column text align to center but it didn’t seem to make a difference.

So the goal here is centering the buttons with the text/icon above them in their respective columns and have all of the buttons line up horizontally as well.

How would you solve this issue? Should I take the buttons out of the columns and just create a custom flex box for them?

Thanks!
Ryan

#13

Hello Ryan,

You are using this custom css for your columns:

.mainfeatures {
    flex-basis: 22%;
    color: white;
    display: flex;
    flex-direction: column;
    height: 500px;
    justify-content: center;
}

This does not help to align the buttons. Please remove the code and set a minimum height for the header text and the content text so that they have a uniform height in each column respectively. When they have the same heights, the button should be able to lined up all across together.

Hope this explains it briefly.

#14

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