How to Make a List-Style-Image Scale with The List's Font Size, When We Can't Use Glyph Fonts

.svgicon img, .svgicon svg {  height: 1em;  width: auto;}
p, span {  font-size: 16px;}

<p>text <span class="icon svgicon"><img class="custom" src="img.jpeg" /></span></p><p>text <span class="icon svgicon"><svg>...</svg></span></p>

Bullet points to small with ::before / I tried :display none and use ::marker but wont work with my theme

What you're looking for is the line-height CSS property.

After you've made your font-size adjustments, change your line-height as desired.

How do I make the text bigger when a list also has an href?

You should use a CSS file whenever possible. You could also use a style tag. But the following in your html file.

<style>
ul li,
ul li a {
    color:black;
    font-size:30px;
}
</style>

Incorrect sizing for the icon-font build with Glyphs and exported with FontSquirrel

My mistake was to create glyphs with setting of "units per em" equal to 1000. After changing the value, already existing glyphs do not update automatically, you should press the button next to the setting.

How can I make an svg scale with its parent container?

To specify the coordinates within the SVG image independently of the scaled size of the image, use the viewBox attribute on the SVG element to define what the bounding box of the image is in the coordinate system of the image, and use the width and height attributes to define what the width or height are with respect to the containing page.

For instance, if you have the following:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

It will render as a 10px by 20px triangle:

Now, if you set only the width and height, that will change the size of the SVG element, but not scale the triangle:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

If you set the view box, that causes it to transform the image such that the given box (in the coordinate system of the image) is scaled up to fit within the given width and height (in the coordinate system of the page). For instance, to scale up the triangle to be 100px by 50px:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

If you want to scale it up to the width of the HTML viewport:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Note that by default, the aspect ratio is preserved. So if you specify that the element should have a width of 100%, but a height of 50px, it will actually only scale up to the height of 50px (unless you have a very narrow window):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

If you actually want it to stretch horizontally, disable aspect ratio preservation with preserveAspectRatio=none:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

(note that while in my examples I use syntax that works for HTML embedding, to include the examples as an image in StackOverflow I am instead embedding within another SVG, so I need to use valid XML syntax)

make font size smaller when post title exceeds a limit

Firstly, this will probably be awkward as you should be building responsive sites. Your text should readjust based on the screen reading the website, and if you are trying to define changes to make the text fit on one line you could be tweaking this over and over again.

I advise that you design around this and customise your layout rather than trying to change size based on text length, over and over again.

However, you could do something as follows within PHP/CSS.

Check the strlen on the get_title function. If the strlen is more than a specified amount (say 20) you'd add a class, otherwise ignore it. Then, you'd style that class responsively based on how you wanted to change the font.

You'd need to edit your theme to replace the Title with the following:

<?php 

$title = get_the_title();

if (strlen($title) >= 20) {
  <h1 class="longer-text-modifier">
} else {
  <h1>
}

  <?= $title; ?>
</h1>

With your CSS being

.longer-text-modifier {
  font-size: 16px; // or em or rem
}

Edit: This could also be done on the fly with JavaScript.

When making a list, how can I make the multi-line sentence be even with the start of the other sentences?

Here is one way you can solve this.

ul {  list-style: none;}ul li {  position: relative;  padding-left: 20px;}ul li:before {  position: absolute;  top: 0;  left: 0;  content: '✓';  color: #4ab847;  font-weight: bold;  line-height: 1.5em;}

<ul>  <li>Tehniskā palīdzība 24/7</li>  <li>Neierobežots norbraukums</li>  <li>Maiņas automašīna satiksmes negadījuma vai zādzības gadījumā Maiņas automašīna satiksmes negadījuma vai zādzības gadījumā Maiņas automašīna satiksmes negadījuma vai zādzības gadījumā</li>  <li>Civiltiesiskā atbildība</li>  <li>Apdrošināšana avāriju un tehnisku bojājumu gadījumiem</li>  <li>Apdrošināšana zādzību gadījumā</li></ul>