I'm helping develop a website for a GitPages workshop and I'm new to Just the Docs theme. How can you change the font size for a long title that appears in the header/home link (top left of the screenshot). For reference, here is the Github repo.
Thanks in advance!
I tried to edit files in both the _includes and _sass folders but I either wasn't able to identify the correct file or I was unsure how to properly edit these files.
I have checked the browser dev tools/inspector.
The font size is set in two places (according to my current screen size):
#media (min-width: 31.25rem)
.site-title {
font-size: 24px !important;
}
.site-title {
font-size: 18px !important;
}
GitHub repo searches:
for font-size: https://github.com/cmu-lib/portfolio_workshop/search?q=font-size
for .site-title: https://github.com/cmu-lib/portfolio_workshop/search?q=site-title
In general, the theme uses some predefined CSS classes to set the font size.
The sizes from above (18px, 24px) correspond with the
.fs-6 CSS class.
The docs suggest to use custom CSS to overwrite any default styles.
Related
I've become an administrator of a website for a local club. The website's address is https://dlhg.org.uk/. It's on a "Personal" plan; I'm not the website owner so upgrading to a more expensive plan isn't up to me.
I've just updated the website so it uses the Twenty Twenty-One theme. Mostly it's an improvement but there are some problems. For example, see
https://dlhg.org.uk/programme/
I'd like to reduce the size of the headings and centre-align them, I can't do either
I'd like to reduce the size of the body text a little by changing the baseline font size, but WordPress will only let me change the font, not the font size
Here's a short Snagit video on my issues:
https://1drv.ms/v/s!AmxJyApgEAcYhulXWv0swpg0Jq0kFQ?e=p2A8eV
Could anyone help?
Thank you!
As theme is not having font-size changing custom option field , you can change it by adding your additional css in
appearance -> customise -> additional css"
as you want to change heading size then you can add
.singular .entry-title {
font-size: 44px;
text-align: center;
}
change font size as per your need
and for reducing the size of the body text use
body p {
font-size: 14px;
}
I want my website to adapt dynamic font-size for iOS. So If you change font-size in settings (Settings > General > Accessibility > Larger Text on your iPhone), your webpage font-size should adjust based on that.
I have font: -apple-system-body added in html root. And throughout the website I am using rem to adjust font-size relative to html root.
So it's working but the problem is -apple-system-body gives font-size: 16px by default which is too high for my page. I want to convert that to 10px; So my html root font-size should be 62.5% of what the system gives always.
Currently I am achieving that using javascript with something like this :
document.documentElement.style.fontSize = document.documentElement.style.fontSize * 0.625;
Was wondering if there's css only way to solve this.
You could use the css calc() function. Inside this function, you can perform operations. For example:
font-size: calc(1rem * 0.625);
For more info: https://css-tricks.com/a-complete-guide-to-calc-in-css/
Yes, set the HTML size to 62.5%. This will honour system settings (the 10px is a fallback for ancient browsers, not really needed)
html{
font-size: 10px;
font-size: 62.5%;
}
Ensure you definitely have rem or em units everywhere if you do this though.
I am using jQuery developed about lightboxes, and it is amazing.
However, I saw that the font of the captions and it don't fit to my website style...
I wanted to know if someone had an idea about how to change the webfont of this captions...
Font is changed by targeting the parent div and child element class or attribute and then specifying the font family.
e.g
<div class="light-box-sample">
<p> this could be a text</p>
</div>
Your CSS should look like
.light-box-sample p {
font-family: 'open sans' sans-serif;
}
Note : targeting .light-box-sample wont do the magic, the child element should be targeted also.
if there was no child element then the parent div could be targeted.
in the above CSS the first font indicates the universal font, and the double quote is used when the font has a space between its name literally like your first font choice , second font indicates a backup font that's located on all PC.
Generally you need to first download your font, and install locally on your PC to see the effect on your development environment and when you are done changing what you want to , you could add the CDN link of the font to the head section or whatever way to your design, so users who doesn't have that font installed on there computer could also see the font manifest.
hope this was helpful :-)
Enter code into lightbox.min.css to change caption font attributes:
.lb-caption {
font-size: 24px !important;
color: #727fee !important;
font-family: helvetica !important;
}
.lb-number {
color: red !important;
}
(.lb-number will change page number attributes)
I have to correct some text size. If you fx look at this page: the headlines are going out from the page on a mobile device, (or in the 'blisk' browser) so you have to scroll right to see the text.
The site has a lot of pages, and I cannot find the CSS or Sass file that is controlling the font.
Does anybody knows if I can see in the browser which document the <h2> tag is using. As I see it I cannot see it through the developer tools?
You have just one minified css
<link href="/bundles/css?v=SJ37P6CfqPJUAiVuLtUYrkvpJkXmJUlOWclWB_n1UKw1" rel="stylesheet"/>
The problem is here:
.h2, h2 {
font-size: 40px;
padding-top: 30px;
}
Since you have long words the browser try not to broke the words into multiple lines. You can decrease the font size for a certain breakpoint:
#media screen and (max-width: 640px){
.h2, h2 {
font-size: 26px;
}
}
As Alessio mentioned the error lies in the h2 part.
If you switch over to developer tools you can see the width of certain html elements (some kind of overlay). In this case the h2 element goes over the border, which results in that scrolling problem. Your text or specifically this word "Søgemaskineoptimering" is too long and too big to fit in one line (mobile view). You can either change the font-size or set a wordbreak . Alessio already explained the breakpoint approach.
Best regards,
KN
A friend of mine has recently updated my website for me & unfortunately he is not available, the menu looked ok on every other page but on forum page the font size is smaller as compared to other pages.
Here is the link to the particular problem.
http://www.homemadetools.net/forum/
Can you guys please let me know what exactly is wrong so I could update the website accordingly.
There is a css.php stylesheet added on the forum page which has this CSS declaration on line 1275:
body {
color: #3E3E3E;
font-size: 13px;
line-height: 1.23;
margin: 0 auto;
min-width: 650px;
width: 970px;
}
The font-size here overrides the default font-size of 1em that is shown on other pages.
Note I used Firebug to determine which font-size CSS rules were actually being applied to these elements. It is a tool that you might want to familiarize yourself with.
You have a syntax error in styles.css on line 269 and css.php on line 222:
font-size: 13.75
should be:
font-size: 13.75px
That seems to fix it.
Both line 1275 and 1257 in css.php (its output, not the source) have body font or body font-size declarations respectively, that set the font size to 13px, which is then inherited to the menu. To fix it, you can set the font attribute at line 222 of the css.php (output) to
font:13.75px !important;
Which will then override any subsequent body declaration and fix your problem with the least hassle.
On further inspection it is just the lack of a 'px' denomination that prevents it from being chosen over the properly formatted body declarations. You can probably skip the !important flag then, as there is no actual inheritance problem. Just bad CSS.
let me clarify you only want the "MENUS" not the forum section font size to be the same with the other pages?
just check the font size declaration on the stylesheets attached to the forum page