Two column Header Style 1

Mohsin Liaquat

Se Habla Español

The above block is copied from the site: TPA

Pattern HTML

<!-- wp:group {"metadata":{"name":"Landing Header"},"align":"full","className":"lp0019-header","style":{"spacing":{"padding":{"top":"5px","bottom":"5px"},"blockGap":"0"}},"backgroundColor":"eight","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull lp0019-header has-eight-background-color has-background" style="padding-top:5px;padding-bottom:5px"><!-- wp:columns {"verticalAlignment":"center","isStackedOnMobile":false} -->
<div class="wp-block-columns are-vertically-aligned-center is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-logo {"width":170} /--></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|15"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"bottom","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":4,"fontSize":"paragraph-2"} -->
<h4 class="wp-block-heading has-paragraph-2-font-size">Se Habla Español</h4>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="tel:6152279278">(615) 227-9278</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Pattern CSS

@media only screen and (max-width: 600px) {
	
	/*Lp0019 Header*/
	.lp0019-header .wp-block-column .wp-block-group {
    	flex-direction: column;
	}

	.lp0019-header .wp-block-column .wp-block-group {
		flex-direction: column;
		gap: 5px;
	}
	
	#site-container .lp0019-header {
		position: fixed;
		z-index: 9;
		width: 100%;
		top: 0;
		left: 0;
		margin: 00;
	}	
	
	#site-container .lp0019-header .wp-element-button {
		padding: 16px 19px;
	}
	
	#site-container .lp0019-banner{
		margin-top: 105px !important;
	}
}