Link in Bio (Xue Tengfei)

[alaczek]

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/08/aisvri-bff-9s0ktp8-unsplash.jpg","id":5831,"dimRatio":50,"minHeight":100,"minHeightUnit":"vw","isDark":false,"align":"full"} -->
<div class="wp-block-cover alignfull is-light" style="min-height:100vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-5831" alt="" src="https://dotcompatterns.files.wordpress.com/2022/08/aisvri-bff-9s0ktp8-unsplash.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"textColor":"background","layout":{"inherit":false,"contentSize":"400px"}} -->
<div class="wp-block-group has-background-color has-text-color"><!-- wp:heading {"fontFamily":"fira-sans"} -->
<h2 class="has-fira-sans-font-family has-custom-font" style="font-family:fira-sans">Xue Tengfei</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a neque vestibulum, tincidunt mi ut, fringilla purus. Etiam elementum felis rhoncus orci pellentesque tempus. Phasellus congue ultrices nulla sed aliquam.<br><br>Vivamus nec mi at ante vehicula laoreet. Curabitur sed sem nec urna dictum tempor. Sed et justo est.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"background","width":100,"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link has-background-color has-text-color wp-element-button">GET IN TOUCH</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:social-links {"iconColor":"background","iconColorValue":"#ffffff","size":"has-small-icon-size","className":"is-style-logos-only"} -->
<ul class="wp-block-social-links has-small-icon-size has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"instagram"} /-->

<!-- wp:social-link {"url":"#","service":"tiktok"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"youtube"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Preview: https://dotcompatterns.wordpress.com/?p=5829&preview=true

[alaczek]

I'd appreciate your help with this one @onuro - for some reason the cover height extends beyond screen height, resulting in a scrollbar and the content being placed towards the bottom of the viewport. I can't quite seem to figure out why.

[onuro]

Yeah it's because the cover is set as 100vw(viewport width) while it should be set as full height cover or 100vh(viewport height)

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/08/aisvri-bff-9s0ktp8-unsplash.jpg","id":5831,"dimRatio":50,"minHeight":100,"minHeightUnit":"vh","isDark":false,"align":"full"} -->
<div class="wp-block-cover alignfull is-light" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-5831" alt="" src="https://dotcompatterns.files.wordpress.com/2022/08/aisvri-bff-9s0ktp8-unsplash.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"textColor":"background","layout":{"inherit":false,"contentSize":"400px"}} -->
<div class="wp-block-group has-background-color has-text-color"><!-- wp:heading {"className":"has-custom-font","fontFamily":"fira-sans"} -->
<h2 class="has-custom-font has-fira-sans-font-family">Xue Tengfei</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a neque vestibulum, tincidunt mi ut, fringilla purus. Etiam elementum felis rhoncus orci pellentesque tempus. Phasellus congue ultrices nulla sed aliquam.<br><br>Vivamus nec mi at ante vehicula laoreet. Curabitur sed sem nec urna dictum tempor. Sed et justo est.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"background","width":100,"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link has-background-color has-text-color wp-element-button">GET IN TOUCH</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:social-links {"iconColor":"background","iconColorValue":"#ffffff","size":"has-small-icon-size","className":"is-style-logos-only"} -->
<ul class="wp-block-social-links has-small-icon-size has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"instagram"} /-->

<!-- wp:social-link {"url":"#","service":"tiktok"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"youtube"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

[alaczek]

How did I miss this? Thanks for fixing it!

[iamtakashi]

Ah, I just came here to point out the use of vw unit in error. I've edited the pattern in the site, and I changed the focal point of the image accordingly.

https://libthemeexperiment.wordpress.com/xue-tengfei/

[alaczek]

Awesome, thanks Takashi! Published!