Global variable override by Bootstrap style

Question

I have declare h1 tag font size in global variable,

app\design\frontend\zero_theme\theme\web\css\source\components_variables.less

@h1__font-size: 48px !important;

Declare inside the custom less file,

C:\xampp\htdocs\mage\app\design\frontend\zero_theme\theme\web\css\source\components\common.less

h1 {
    font-size:@h1__font-size;    
}

When i see website home page, the font override by bootstrap font.

How to apply by global variables to home page?

Madani Hardik · Accepted Answer · 2021-01-08 06:44:49Z

1

Add the below css in your css file

h1 {
    font-size:@h1__font-size !important;    
}

after run the below commands,

php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:f

answered Jan 8, 2021 at 6:44

Madani Hardik

6022 silver badges7 bronze badges

Which css file?
– zus
Jan 8, 2021 at 7:15
1

C:\xampp\htdocs\mage\app\design\frontend\zero_theme\theme\web\css\source\components\common.less AS you used the css file ,
– Madani Hardik
Jan 8, 2021 at 7:18
My CMS static block have button, by default bootstrap design applied, how to apply my own design/
– zus
Jan 8, 2021 at 8:02
1

Add the custom css class in your static block button and add the custom css in your custom added css class in your css file and also put the your css file link in default_head_blocks.xml file after the bootstrap css link.
– Madani Hardik
Jan 8, 2021 at 8:13

Add a comment |

1 Answer 1