Coder.css file keeps reverting changes

Hi! I am very new to web developement and hugo (but experienced coder). I am working on a website using the ‘coder’ theme as a template in Visual Studio. I wanted to change the width of the website, so I went into the public/css/coder.css file and found the .container object and changed the max-width parameter. This updated my site and all is good. Except next time I change anything in any file, it reverts it back to the original max-width and throws 2 errors in the public/css/coder.css file;

/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=“button”],
[type=“reset”],
[type=“submit”] {
-webkit-appearance: button; }

Error: Also define the standard property ‘appearance’ for compatibility

/**
*1. Correct the odd appearance in Chrome and Safari.
*2. Correct the outline style in Safari.
/
[type=“search”] {
-webkit-appearance: textfield;
/
1 /
outline-offset: -2px;
/
2 */ }

Error: Also define the standard property ‘appearance’ for compatibility

I googled this and used a solution where I just add a line below like

-webkit-appearance: button;
appearance: button;

This fixes the problem for a little while (and does not revert the size). However, after a while, but still in the same session, it changes everything back to original and throws the errors again. As I am very new to web development, I might be completely missing some crucial information here. Any help is appreciated!

Welcome,

first I would encourage you to spend some time in at least reading the Basics in Getting started | Hugo. At least the first three sections are mandatory.

The public is populated on a hugo build with the generated files. So changing anything there won’t live long.

And check the docs from your theme where they reference an example config setting that seems to solve your problem. You might read some more hugo docs to understand all there…

## Custom CSS
customCSS = [ ]
  • uncomment/add/edit the following line to the [params] section in hugo.toml

    customCSS = ["css/custom.css"]
    
  • create a new CSS file as assets/css/custom.css

  • add your CSS code there

    .container {
       max-width: 600px;
       background-color: aquamarine;
    }
    

That way your changes are taken over everytime hugo builds something.