I'm trying to use Media Queries, but it doesn't seem to work as it should.
I have a file called fonts.module.scss that contains font sizes.
The fonts.module.scss file is located in styles/variables.
It is then imported into main.module.scss, which is located in the styles folder.
Everything works fine. The font sizes change as per my requirement. However, when I want to change the font size depending on the screen resolution (using Media Queries), it doesn't work.
I checked if Media Queries works on all other files with styles, will it change size there, everything is ok there.
I checked in components (each separate folder has its own scss) and in files located in styles. Everything's fine!
Only in the file fonts.module.scss does not want to change. I have to encode it in it because otherwise, I'll have to change Media Queries in each file separately. Waste of time! :/
// FONT SIZES
$fontSizeTitle: 2.8rem;
$fontSizeNormal: 1.1rem;
$fontSizeMedium: 1.2rem;
$fontSizeLarge: 1.3rem;
$fontSizeXLarge: 1.4rem;
$fontSizeXXLarge: 1.5rem;
#media screen and (max-width: 1400px) {
$fontSizeTitle: 2.2rem;
$fontSizeNormal: 0.9rem;
$fontSizeMedium: 1rem;
$fontSizeLarge: 1.1rem;
$fontSizeXLarge: 1.2rem;
$fontSizeXXLarge: 1.3rem;
}
How to make Media Queries work in the fonts.module.scss file?
Am I doing something wrong? Maybe something I don't know yet?
Related
I am using antora for documenting a product architecture specification. We have large diagrams so allowing the svg images to scale up as large as possible when maximizing the browser window is a big plus.
I am not even a css novice. I know almost nothing. I can build antora documents (web pages) so I know only a tiny bit of antora from a user perspective.
I found this comment on how to make the scaling work. https://gitter.im/antora/users?at=5d97c8ea37073b36a06fddb8
I can get the desired results if I edit doc.css, build a ui-bundle.zip, point local-antora-playbook.yml at the newly created ui-bundle.zip and rebuild the site.
.doc {
color: var(--doc-font-color);
font-size: var(--doc-font-size);
hyphens: auto;
line-height: var(--doc-line-height);
margin: var(--doc-margin);
/* max-width: var(--doc-max-width); */
padding: 0 1rem 4rem;
}
#media screen and (min-width: 1024px) {
.doc {
flex: auto;
font-size: var(--doc-font-size--desktop);
margin: var(--doc-margin--desktop);
/* max-width: var(--doc-max-width--desktop); */
min-width: 0;
}
}
This is the suggested edit in the comment link I found and posted just above. I would prefer to use the supplemental-ui approach that is referenced here; Antora top navigation bar customization and actually used by the documentation for antora https://gitlab.com/antora/docs.antora.org.
I can see that my edited doc.css gets created in the new site when I build via a supplemental-ui approach. However, I don't get the desired results of being able to use the max-width of the web browser when maximized. I understand that in css if you declare something later it takes precedence. I'm wondering if the absence of a max-width is simply not being observed because of the order of sourcing files. I've tried different file names like doc.css and xdoc.css thinking they were sourced alphabetically. This didn't seem to help.
Is there a way to make this small css change and use the supplemental-ui approach of getting it into my antora site when I build it?
I would like the supplemental-ui approach to work so we can always stay up to date with antora changes and only have our tiny change to max-width. The approach I have working requires building antora with the tiny change and pointing at that new zip file to build antora instead of sourcing the current latest antora in the public antora repo.
For debug I also tried this approach with the supplemental-ui build procedure. I understand !important is not recommended but I was just trying to figure out if I could get something working other than the full build to a zip file.
.doc {
color: var(--doc-font-color);
font-size: var(--doc-font-size);
hyphens: auto;
line-height: var(--doc-line-height);
margin: var(--doc-margin);
/* max-width: var(--doc-max-width); */
max-width: none !important;
padding: 0 1rem 4rem;
}
#media screen and (min-width: 1024px) {
.doc {
flex: auto;
font-size: var(--doc-font-size--desktop);
margin: var(--doc-margin--desktop);
/* max-width: var(--doc-max-width--desktop); */
max-width: none !important;
min-width: 0;
}
}
It's possible to alter the effective css using supplemental UI but is slightly less performant (requiring fetching an additional css file) and I don't recommend it. The process of building a UI bundle puts all the css into one optimized file, which cannot really be modified later using supplemental UI. Therefore what you have to do is add a "new" css file in your supplemental UI containing the modifications or overrides you want, and also include a partial that pulls in your additional file.
For instance, if your additional file is css/expand-svg.css, you'd need also a partials/head-styles.hbs containing
<link rel="stylesheet" href="{{uiRootPath}}/css/site.css">
<link rel="stylesheet" href="{{uiRootPath}}/css/expand-svg.css">
I tried this with the additional css file containing
.doc {
max-width: none;
}
#media screen and (min-width: 1024px) {
.doc {
max-width: none;
}
}
and it appears to work as you want. The !important isn't needed as the additional css appears later than the default UI css so overrides it.
Going through the Bulma.io documentation, I cannot find how to set the base font-size for the responsive design.
As per this section on setting initial variables, we can set the initial value of classes $size-1 etc. However, I am wanting to set the very base font-size for the responsive-design. I.e. when the screen dimensions are, say, 980px, the base font-size should be 12px, instead of the standard 16px. Because the above mentioned font classes '$size-1', are rem, they would automatically resize as well.
So, my question is, is it possible to set the base font-size for the responsive design in Bulma? Or must I change the sizes of the classes $size-1 etc manually.
Thanks
Add this after importing Bulma SASS files.
html {
font-size: 12px;
#include tablet {
font-size: 16px;
}
#include desktop {
font-size: 20px;
}
}
This overrides the $body-size variable, but it's only used to set html {font-size} so this should not cause any problems.
It's the $body-size variable that you were looking for. Before importing Bulma, customize the variable's value:
// Custom config
$body-size: 14px !default;
// Standard Bulma
#import "bulma/bulma.sass";
Trying to print my views to PDF and I am getting pdfs rendered as for mobile device. Basically, I think smallest screen is detected and css styles for mobile are used. Is there a way to fix this?
I tried to change format size and make it really big, tried to use landscape orientation, but content would just scale up and it would still show with mobile styles.
I am thinking to render a partial view to pdf and have custom css file just for pdf exports, but that seems like a lot of not necessary work
Any ideas?
Thanks
What you could be doing is using the print media type in your stylesheet. It would look something like this:
#media print {
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
color: red;
}
}
Maybe you already use this media type and put it in your mobile styling? Might want to put it above any responsive input and see how that works out?
Bootstrap's global default font-size is 14px, with a line-height of 1.428. How can I change its default global settings?
Will I have to change bootstrap.min.css in all the multiple entries?
Bootstrap uses the variable:
$font-size-base: 1rem; // Assumes the browser default, typically 16px
I don't recommend mucking with this, but you can. Best practice is to override the browser default base font size with:
html {
font-size: 14px;
}
Bootstrap will then take that value and use it via rems to set values for all kinds of things.
There are several ways but since you are using just the CSS version and not the SASS or LESS versions, your best bet to use Bootstraps own customization tool:
http://getbootstrap.com/customize/
Customize whatever you want on this page and then you can download a custom build with your own font sizes and anything else you want to change.
Altering the CSS file directly (or simply adding new CSS styles that override the Bootstrap CSS) is not recommended because other Bootstrap styles' values are derived from the base font size. For example:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52
You can see that the base font size is used to calculate the sizes of the h1, h2, h3 etc. If you just changed the font size in the CSS (or added your own overriding font-size) all the other values that used the font size in calculations would no longer be proportionally accurate according to Bootstrap's design.
As I said, your best bet is to just use their own Customize tool. That is exactly what it's for.
If you are using SASS or LESS, you would change the font size in the variables file before compiling.
You can add a style.css, import this file after the bootstrap.css to override this code.
For example:
/* bootstrap.css */
* {
font-size: 14px;
line-height: 1.428;
}
/* style.css */
* {
font-size: 16px;
line-height: 2;
}
Don't change bootstrap.css directly for better maintenance of code.
The recommended way to do this from the current v4 docs is:
$font-size-base: 0.8rem;
$line-height-base: 1;
Be sure to define the variables above the bootstrap css include and they will override the bootstrap.
No need for anything else and this is the cleanest way
It's described quite clearly in the docs https://getbootstrap.com/docs/4.1/content/typography/#global-settings
As of Bootstrap 5 you can set the default font size by changing the $font-size-root variable.
$font-size-root: 16px;
In v4 change the SASS variable:
$font-size-base: 1rem !default;
I use Bootstrap via CDN (Content Delivery Network), so I solved it with this easy way. Change the global default font-size in the <html> tag.
Example for smaller font-size:
<html style="font-size:0.875em">
Simple change the em value.
With Bootstrap Version 5.2 the font size is 1rem:
font-size-base: 1rem; // Assumes the browser default, typically 16px
0.875em = 14px, if default browser font size is 16px
1em = 16 px
1.125em = 18px, if default browser font size is 16px
I just solved this type of problem. I was trying to increase font-size to h4 size. I do not want to use h4 tag.
I added my css after bootstrap.css it didn't work.
The easiest way is this:
On the HTML doc, type
<p class="h4">
You do not need to add anything to your css sheet. It works fine
Question is suppose I want a size between h4 and h5?
Answer why? Is this the only way to please your viewers?
I will prefer this method to tampering with standard docs like bootstrap.
I've been given the task of customising certain elements of a site which is using Twitter Bootstrap 3.0.2.
The site will be using default Bootstrap styles and responsive layouts except for a particular custom CSS theme file whose modified styles will only be applied when certain users access the site via certain means.
In any event, I need to disable just the .xs responsive layout and nothing else. This means that the screen must retain a small screen layout on resolutions below 767px.
I've looked at many answers on this site and the closest one is this one that describes editing the existing bootstrap.css file.
I don't want to edit the core bootstrap files but simply want to override the .xs layout in a custom CSS file that is called after the bootstrap file.
I'm not sure how or what I should be editing as the media queries look like the following and it's a bit confusing to me.
#media (max-width: 767px) {
.hidden-xs,
tr.hidden-xs,
th.hidden-xs,
td.hidden-xs {
display: none !important;
}
}
#media (max-width: 767px) {
.hidden-sm.hidden-xs,
tr.hidden-sm.hidden-xs,
th.hidden-sm.hidden-xs,
td.hidden-sm.hidden-xs {
display: none !important;
}
}
Any and all answers are greatly appreciated.
Thanks in advance.