Menü Schließen

line-height von elementor radio button form label Hack

line-height von elementor radio button form label Hack

https://stackoverflow.com/a/6246422

The line-height property in CSS is used to control the spacing between lines of text. When working with Elementor, a popular WordPress page builder, designers may want to customize the appearance of form elements, such as radio buttons, to match their website’s design. A common customization is adjusting the line-height of the labels associated with radio buttons to improve readability or align with the overall design aesthetic. To achieve this, a user might employ a „hack“ or workaround, by adding custom CSS to the Elementor widget or section that contains the radio button form. This could involve targeting the specific class or ID of the radio button labels and setting a desired line-height value. For instance, custom CSS like `.elementor-field-label { line-height: 1.5; }` could be added to the Elementor custom CSS section to change the line-height of all labels within Elementor form fields, improving the visual spacing of the text associated with each radio button. It’s important to note that such customizations should be tested across different browsers and devices to ensure a consistent user experience.

Remote Material Icons von mylisting theme entfernen

// remove google material icons
add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_script( 'mylisting-material-icons' );
wp_dequeue_style( 'mylisting-material-icons' );
}, 99 );

Dann style.css in child theme bearbeiten:

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://xxxxxxxxxx.de/wp-content/embed-google-fonts/material-icons/material-icons-google.eot"); /* IE9 Compat Modes */src:url("https://xxxxxxxxxx.de/wp-content/embed-google-fonts/material-icons/material-icons-google.eot?#iefix") format("eot"),url("https://xxxxxxxxxx.de/wp-content/embed-google-fonts/material-icons/material-icons-google.woff2") format("woff2"),url("https://xxxxxxxxxx.de/wp-content/embed-google-fonts/material-icons/material-icons-google.woff") format("woff"),url("https://xxxxxxxxxx.de/wp-content/embed-google-fonts/material-icons/material-icons-google.ttf") format("ttf"),url("https://xxxxxxxxxx.de/wp-content/embed-google-fonts/material-icons/material-icons-google.svg#Material Icons") format("svg") ;}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Fluid Typography Elementor Breakpoints etc.

<style>
	.elementor-kit-200 h1 { font-size: clamp(2.369rem, 2.0686rem + 1.502vw, 4.209rem); }
	.elementor-kit-200 h2 { font-size: clamp(1.777rem, 1.5517rem + 1.1265vw, 3.157rem); }
	.elementor-kit-200 h3 { font-size: clamp(1.333rem, 1.1639rem + 0.8457vw, 2.369rem); }
	.elementor-kit-200 h4 { font-size: clamp(1.2rem, 1.1058rem + 0.471vw, 1.777rem); }
	.elementor-kit-200 h5 { font-size: clamp(1.1rem, 1.062rem + 0.1902vw, 1.333rem); }
	.elementor-kit-200 h6 { font-size: clamp(1rem, 0.9673rem + 0.1633vw, 1.2rem); }
	body p { font-size: clamp(1.4rem, 1.3429rem + 0.2857vw, 1.75rem); }
</style>

https://type-scale.com/

https://clamp.font-size.app/