Hello Folks.
I’m new to webDev so this may seem a little simple for many, but here goes…
Problem: My list (accordion) will:
A.Display incorrectly (halved)
B.Display correctly… in the WRONG spot on page.
Im working on a E-Resume. I’m using the template here:
https://www.w3schools.com/w3css/tryw3css_templates_cv.htm
So here’s my actual code https://pastebin.com/kEVWaxGi)
My problem is that I’ve added an clickable / expandable list (“accordion”) that wont position OR display properly. (Note Section :’ .accordion.minitb’ )
Here is my CSS: https://pastebin.com/MHRu6zZ8
I’ve isolated the problem to the style section rule’ :before and :after’ which universally apply the rule:
::before,:after{box-sizing:inherit}
If I take away/comment out this rule, the accordion will display correctly (not halved / missing some parts). GREAT
But the problem is – the RESPONSIVE ness of the page gets broken, in that the accordion will not display anywhere but under the first section – as opposed to – to the right of the blue section with those pretty progress/level bars. ALSO, the main content sections (go underneath prematurely, instead of based on window size)
IF I could get it to do both (display correctly and in the right spot) all would be great, because the template is Responsive and that works well.
SO! Mr. accordion (.accordion.minitb) is giving me trouble to display correctly.
Why is having ::before,:after{box-sizing:inherit} necessary for this page to be healthy-RESPONSIVE?
And why wont my accordion display correctly when its enabled?
Thanks in advance.
