customize this theme smaller

[hung1998pro]

I need to customize your theme to the smaller version, how can I customize the sidebar, spacing and page content smaller. I've tried to change the root font-size and margin-left of main-content on directly on chrome. Where I can edit that style on your project?

[einazare]

Hello again, @hung1998pro ,

All the css/scss variables can be found inside:

• src/assets/scss/custom/_variables.scss

But we do not recommend you changing our styles since it will be hard for you to update your project to our new versions of this product. What we recommend you, is that you create your own scss file with variables, and then import it inside src/assets/scss/argon-dashboard-pro-react.scss right after the import of our variables, this way, your variables will override ours.

Best, Manu

[hung1998pro]

I've tried overriding your style as I said before, but it seems like when the root font-size changes, the height of the input element is no longer fit with the height of the button. Here is the pic when I inspect from chrome

how can I fix this for overall project? Thank in advance,

[einazare]

Hello again, @hung1998pro ,

Well, yes, if you change the height of the Input, it will be different than the height of the button. You need to change the height of the button as well.

Best, Manu

[hung1998pro]

But I didn't change the height of the Input, I just change the font-size in html element :(

[einazare]

Hello again, @hung1998pro ,

On the image that you have sent, there appears that the height of the input was changed, please take a look at the image. Please, guide me through the changes you have made.

Best, Manu