Link in Bio (Luis Carballeda)

[alaczek]

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/08/topology_bg.jpg","id":5824,"hasParallax":true,"dimRatio":0,"minHeight":100,"minHeightUnit":"vh","isDark":false,"align":"full"} -->
<div class="wp-block-cover alignfull is-light has-parallax" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-5824 has-parallax" style="background-position:50% 50%;background-image:url(https://dotcompatterns.files.wordpress.com/2022/08/topology_bg.jpg)"></div><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":false,"contentSize":"940px"}} -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:heading {"textAlign":"left","style":{"typography":{"fontStyle":"normal","fontWeight":"300","lineHeight":"0.9","fontSize":"11rem"}},"textColor":"white"} -->
<h2 class="has-text-align-left has-white-color has-text-color" style="font-size:11rem;font-style:normal;font-weight:300;line-height:0.9">Luis<br>Carballeda</h2>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"style":{"spacing":{"blockGap":"10%"}}} -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"top","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:40%"><!-- wp:paragraph {"textColor":"white","fontSize":"small"} -->
<p class="has-white-color has-text-color has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id arcu aliquet, elementum nisi quis, condimentum nibh. Donec hendrerit dui ut nisi tempor scelerisque.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links {"customIconColor":"#ff615e","iconColorValue":"#ff615e","iconBackgroundColor":"background","iconBackgroundColorValue":"#ffffff"} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- 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 -->

<!-- wp:spacer {"height":"5vh"} -->
<div style="height:5vh" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:buttons {"style":{"spacing":{"blockGap":"10px","margin":{"top":"18px","bottom":"18px"}}}} -->
<div class="wp-block-buttons" style="margin-top:18px;margin-bottom:18px"><!-- wp:button {"textColor":"white","width":100,"style":{"spacing":{"padding":{"top":"8px","right":"8px","bottom":"8px","left":"8px"}},"border":{"radius":"2px"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" style="border-radius:2px;padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px"><strong>My Blog</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"white","width":100,"style":{"spacing":{"padding":{"top":"8px","right":"8px","bottom":"8px","left":"8px"}},"border":{"radius":"2px"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" style="border-radius:2px;padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px"><strong>My Store</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"white","width":100,"style":{"spacing":{"padding":{"top":"8px","right":"8px","bottom":"8px","left":"8px"}},"border":{"radius":"2px"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" style="border-radius:2px;padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px"><strong>Happy News</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"white","width":100,"style":{"spacing":{"padding":{"top":"8px","right":"8px","bottom":"8px","left":"8px"}},"border":{"radius":"2px"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" style="border-radius:2px;padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px"><strong>Inspiration</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"white","width":100,"style":{"spacing":{"padding":{"top":"8px","right":"8px","bottom":"8px","left":"8px"}},"border":{"radius":"2px"}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" style="border-radius:2px;padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px"><strong>Email Me</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

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

[alaczek]

I'm struggling with the mobile optimization of this one. The huge heading is not scaling down (that would be ideal) and it's not breaking up into multiple lines. I'm open to suggestions.

[onuro]

Normally themes should overcome it by break-word css but I also don't see an easy way around the mobile large text issue.

[alaczek]

I figured it out - wrapping the heading in columns block makes the text wrap around with no need for horizontal scrolling. After the changes it looks like this on mobile:

[onuro]

Oh that's fantastic to know!

[alaczek]

Published!