Changing a foundation default

[Andrew Prior]

I'm using Portage as my Design.
It references the Foundation Framework to format blockquotes.

Code: Select all

blockquote {
  margin: 0 0 1rem;
  padding: .5625rem 1.25rem 0 1.1875rem;
  border-left: 1px solid #cacaca;
}

I don't want that border, so I've put the following at the bottom of my custom portage stylesheet, which is linked to the Portage Design:

Code: Select all

blockquote {
  margin: 0 0 1rem;
  padding: .5625rem 1.25rem 0 1.1875rem;
}

Despite multiple cache flushes, this achieves nothing. I've also tried the same process by putting the code in the stylesheet which comes with Portage.

What simple thing am I missing?

Andrea

[DIGI3]

Add:

Code: Select all

border-left: 0;

Remember that the c is css is cascading - that means if a rule is set in an earlier-loaded stylesheet (such as the core Foundation one loaded from the cdn), just omitting it from your overrides won't remove it. You have to set something to override.

[Andrew Prior]

Yes, of course... that had finally occurred to me too, but it's made no difference! Thanks. Andrea

[DIGI3]

I just tested this at the end of the Portage stylesheet and it works to remove the left border:

Code: Select all

blockquote {
  border-left: 0;
}

If it's not working for you, then you either have another style that's overriding it, the style in the wrong place (e.g. in a breakpoint), or a typo somewhere. You should be able to figure it out using your browser's inspector.

[Andrew Prior]

Yes, I tried that, too.
Eventually, I have done this:

blockquote {
margin: 0 0 1rem;
padding: .5625rem 1.25rem 0 1.1875rem;
border-style: none;
border-left-width: 0;
}

W3 Schools said

Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!

and adding the border style seemed to make the difference.

Thank you.