YAFLogo

BWG
  • BWG
  • 100% (Exalted)
  • YAF Lover Topic Starter
15 days 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: 3.0.3
15 days 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
14 days ago
Originally Posted by: tha_watcha 

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

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

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: 3.0.3
14 days ago
Originally Posted by: BWG 

Originally Posted by: tha_watcha 

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

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

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. 

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
14 days 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
12 days ago
Originally Posted by: BWG 

👍 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; } 

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
9 days ago
Originally Posted by: Zero2Cool 

Originally Posted by: BWG 

👍 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; } 

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. 

 

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