YAFLogo

BWG
  • BWG
  • 100% (Exalted)
  • YAF Lover Topic Starter
2 years ago
Hi,

On 3.1.8 is there an easy way to globally:

1) Change the font sizes by  x%? For example, make all of the text (regardless of whether it is header, body etc) 10% smaller on small screens?

2) Make the breadcrumb overflow horizontally instead of wrapping

Thanks 

Brian

 

Sponsor
tha_watcha
  • tha_watcha
  • 100% (Exalted)
  • YAF.NET Project Lead 🤴 YAF Version: 4.0.0 rc 2
2 years ago
1. Yes you can change the font size globally via css variables

--bs-body-font-size: 1rem;
BWG
  • BWG
  • 100% (Exalted)
  • YAF Lover Topic Starter
2 years ago

1. Yes you can change the font size globally via css variables

--bs-body-font-size: 1rem;

Originally Posted by: tha_watcha 

Thanks.

Is there a reason why changes made in the .css file/s are not reflected in the .min.css file/s after build/rebuild? I'm using VS Pro 2022 as the ddev environment. 

tha_watcha
  • tha_watcha
  • 100% (Exalted)
  • YAF.NET Project Lead 🤴 YAF Version: 4.0.0 rc 2
2 years ago

1. Yes you can change the font size globally via css variables

--bs-body-font-size: 1rem;

Originally Posted by: BWG 

Thanks.

Is there a reason why changes made in the .css file/s are not reflected in the .min.css file/s after build/rebuild? I'm using VS Pro 2022 as the ddev environment. 

Originally Posted by: tha_watcha 

It takes too long to long to compile all css files on build. That's why you would need to manually  run grunt to build them.

The css files are generated from the sass files. If you want to change something don't edit the css files. Edit the dass files and the compile it via grunt.

BWG
  • BWG
  • 100% (Exalted)
  • YAF Lover Topic Starter
2 years ago

👍 Thanks.  I changed the $font-size-base in the _variables.scss and then ran grunt from a CLI without any problems.

However, a quick and "dirty" fix which I think may work well in some scenarios is to add a css rule directly to the default.aspx to set the default font size because everything is derived from it. For example: 

 html { font-size: 14px; }

 

Zero2Cool
  • Zero2Cool
  • 100% (Exalted)
  • YAF Leader YAF Version: YAF 3.1.16
2 years ago

👍 Thanks.  I changed the $font-size-base in the _variables.scss and then ran grunt from a CLI without any problems.

However, a quick and "dirty" fix which I think may work well in some scenarios is to add a css rule directly to the default.aspx to set the default font size because everything is derived from it. For example: 

 html { font-size: 14px; } 

Originally Posted by: BWG 

Typically, I've seen a global setting of a certain font-size, and then other things are derived off of it. Start off at a base of say 14pt, and then other things are 1.2rem or 0.75rem and so on. But using 1rem causes the font size to be quite large as 1rem equals the font size of the html element, which for most browsers has a default value of 16px. 

To be clear, this not a gripe or complaint. Just an observation. And my massive font size is most likely due to my poorly designed website, lol. 

 

BWG
  • BWG
  • 100% (Exalted)
  • YAF Lover Topic Starter
2 years ago

👍 Thanks.  I changed the $font-size-base in the _variables.scss and then ran grunt from a CLI without any problems.

However, a quick and "dirty" fix which I think may work well in some scenarios is to add a css rule directly to the default.aspx to set the default font size because everything is derived from it. For example: 

 html { font-size: 14px; } 

Originally Posted by: Zero2Cool 

Typically, I've seen a global setting of a certain font-size, and then other things are derived off of it. Start off at a base of say 14pt, and then other things are 1.2rem or 0.75rem and so on. But using 1rem causes the font size to be quite large as 1rem equals the font size of the html element, which for most browsers has a default value of 16px. 

To be clear, this not a gripe or complaint. Just an observation. And my massive font size is most likely due to my poorly designed website, lol. 

 

Originally Posted by: BWG 

Yes, but I think it is possible to override the browser default by setting the html font size in the way that I showed.