I can't change the Design of items

Question

I am using the ngx-dropzone library however when I drag the files they get very large. In order to get around this, I tried to CSS change the size, but to no avail.

Can anyone help me? I want to have a height and width of about 20px

HTML

<ngx-dropzone-label>
    <div>
        <h2>My custom dropzone</h2>
    </div>
</ngx-dropzone-label>
<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f" [removable]="true" (removed)="onRemove(f)">
    <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-image-preview>

CSS

.custom-dropzone {
    height: 250px;
    background: #333;
    color: #fff;
    border: 5px dashed rgb(235, 79, 79);
    border-radius: 5px;
    font-size: 20px;
}

Answer 1

you can target ngx-dropzone-preview like below

ngx-dropzone-preview{
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
}