Page 1 of 1
Changing a foundation default
Posted: Wed Nov 20, 2024 5:15 am
by 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
Re: Changing a foundation default
Posted: Thu Nov 21, 2024 4:13 pm
by DIGI3
Add:
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.
Re: Changing a foundation default
Posted: Fri Nov 22, 2024 12:13 am
by Andrew Prior
Yes, of course... that had finally occurred to me too, but it's made no difference! Thanks. Andrea
Re: Changing a foundation default
Posted: Fri Nov 22, 2024 12:18 am
by DIGI3
I just tested this at the end of the Portage stylesheet and it works to remove the left border:
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.
Re: Changing a foundation default SOLVED
Posted: Fri Nov 22, 2024 12:24 am
by 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.