//You need to avoid special characters (accept alpha-numeric characters only)
<?php if(get_field('text_block')): ?>
<ul>
<?php while(has_sub_field('text_block')): ?>
<li><a href="<?php the_permalink() ?>#<?php echo preg_replace('/[^A-Za-z0-9]/', "", get_sub_field('paragrah_header')); ?>" class="scroll-anchor"><?php the_sub_field('paragrah_header'); ?></a></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<h2 id="<?php echo preg_replace('/[^A-Za-z0-9]/', "", get_sub_field('paragrah_header')); ?>"><?php the_sub_field('paragrah_header'); ?></h2>
Author: admin
.wrapper {
width: 50%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<div class="wrapper">
<div class="main">
This is your div with the specified aspect ratio.
</div>
</div>
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );