How to scale/size icons on a custom Web Page using the Page Builder templates

[EugeneP]

Hello all

Frappe v15.20

I’m building a custom Web Page with the following templates

I configured each template, uploading the same .svg file for the icon, and they render correctly as can be seen below

1 Section with Features

2 Section with Cards

However, I’m trying to resize the icons, but setting the CSS for the respective classes does not alter their size.

.feature-icon {width:64px;height:64px;}
.card-img-top {width:64px;height:64px;}

I have applied this CSS to the

1. Web Page > Style > CSS
2. Website Theme > Stylesheet > Custom Overrides and Custom SCSS

however none have any affect on the size of the icons.

How can I resize the icons?

[NCP]

Hi @EugeneP,

Use important and check it.

.feature-icon {
    width:64px !important;
    height:164px !important;
}

I tried, and it worked properly

[EugeneP]

Thanks @NCP

It certainly does work, however you should be able to override the style without using !important. Is there no way of applying SCSS to achieve such styling?

[NCP]

An importance rule is used to add more importance to a property/value than usual. In fact, if you use the !important rule, it will override all previous styling rules for that particular property on that element! and I think you know well.

@EugeneP

Is there no way of applying SCSS to achieve such styling?

From the user interface, it lacks any features but only has the website theme, and there isn’t much understanding of how it will function for the web page.

[EugeneP]

As a general rule, you should NEVER resort to using !important. It’s indicative of not doing things properly.