Hugo/Docsy: Cookie info banner is not displaying as intended due to CSS/SCSS mismatch/override

Question

I am developing a simple website using the Hugo static website generator and the Docsy theme. The website includes a simple information Cookie Banner so I have added the same to my static website by referencing the approach mentioned on: Cookie consent | Hugo Codex

Ideally, I would like the banner to be visible like this:

But currently its looking something like this: [

I have added all styles and partials but still it didn't look as expected. Maybe some styles are messing up the child cookie consent styles but unable to figure out the same. Can someone please let me know what am I doing wrong here?

I have added my complete code to the following GitHub project: https://github.com/Aravinda93/hugo-docsy-learn

I am quite new to Hugo and Docsy, so I am getting a bit confused about the folder and file structure, hence am unable to figure out which parent style is messing up my Cookie consent modal. Can someone please help me with some suggestions?

Answer 1

I think this was solved here: https://discourse.gohugo.io/t/cookie-banner-is-not-displaying-as-intended-when-using-hugo-with-docsy-theme/40332/7.

This should be removed:

font-size: s;
transform: translateY(100vh);
color: var(--color-warning);
background-color: var(--color-warning-bg);
width: 100%;

This should be added:

background: white;
border-color: white;
margin-left: -15px;
width: calc(100% + 30px);