Header is not mobile / tablet friendly

Hello! You’re having trouble with the header scaling on your website’s mobile version.
Can You share your Problem Screenshot

Here is a screenshot of what it looks like on mobile. Here is the code I think? I am not familiar with the cs side of wordpress.

<!-- wp:group {"style":{"spacing":{"padding":{"right":"20px","left":"20px","top":"7px","bottom":"7px"}}},"backgroundColor":"secondary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-secondary-background-color has-background" style="padding-top:7px;padding-right:20px;padding-bottom:7px;padding-left:20px"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"small"} -->
<p class="has-text-align-center has-white-color has-text-color has-link-color has-small-font-size"></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"15px","right":"20px","bottom":"15px","left":"20px"}}},"backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-background-color has-background" style="padding-top:15px;padding-right:20px;padding-bottom:15px;padding-left:20px"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignwide"><!-- wp:image {"id":307,"width":"225px","height":"auto","scale":"cover","sizeSlug":"full","linkDestination":"none","style":{"layout":{"selfStretch":"fit","flexSize":null}},"className":"is-style-default"} -->
<figure class="wp-block-image size-full is-resized is-style-default"><img src="https://serverschoicestl.com/wp-content/uploads/2024/06/IMG_1891-edited.png" alt="" class="wp-image-307" style="object-fit:cover;width:225px;height:auto"/></figure>
<!-- /wp:image -->

<!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0px","padding":{"right":"0","left":"0"},"margin":{"top":"0","bottom":"0"}},"dimensions":{"minHeight":"0px"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="min-height:0px;margin-top:0;margin-bottom:0;padding-right:0;padding-left:0"><!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"lineHeight":"1","fontSize":"39px"},"spacing":{"margin":{"right":"0","left":"0","top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"padding":{"bottom":"0","top":"var:preset|spacing|20","right":"0","left":"0"}},"layout":{"selfStretch":"fit","flexSize":null}}} /--></div>
<!-- /wp:group -->

<!-- wp:search {"label":"Search","showLabel":false,"width":570,"widthUnit":"px","buttonText":"Search","buttonUseIcon":true,"borderColor":"black"} /-->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:navigation {"ref":4,"layout":{"type":"flex","justifyContent":"left"},"style":{"typography":{"fontSize":"18px"},"spacing":{"blockGap":"var:preset|spacing|60"}}} /--></div>
<!-- /wp:group -->

<!-- wp:social-links {"iconColor":"base","iconColorValue":"#fffdfd","iconBackgroundColor":"body-text","iconBackgroundColorValue":"#646464","style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"var:preset|spacing|80","right":"var:preset|spacing|80"},"blockGap":{"top":"var:preset|spacing|20","left":"var:preset|spacing|80"},"padding":{"top":"var:preset|spacing|40","bottom":"0","right":"var:preset|spacing|70","left":"var:preset|spacing|60"}}}} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color" style="margin-top:0;margin-right:var(--wp--preset--spacing--80);margin-bottom:0;margin-left:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--70);padding-bottom:0;padding-left:var(--wp--preset--spacing--60)"><!-- wp:social-link {"url":"https://www.instagram.com/servers_choicestl/","service":"instagram"} /-->

<!-- wp:social-link {"url":"https://www.tiktok.com/@servers.choice.st?lang=en","service":"tiktok"} /-->

<!-- wp:social-link {"url":"https://x.com/ServerChoiceSTL","service":"x"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

I suppose the site in question is the one in your user profile

If so, then the problem is your own making!

In the SEARCH block you added to the header, you gave it a FIXED width of 570px. This is what’s making the header extend beyond the mobile screen.

Simply change the search block’s width unit to a relative unit (% instead of px). You’ll have to play with the percentage value until you get something that works well on both desktop and mobile. (If you’re unable to get something that works well on both desktop and mobile, let us know so we can give you a bit of CSS code to show one dimension for desktop and a different width for mobile).

Good luck!

Thanks for the insight! It WAS the search bar that was causing the problem. The over extensions has been fixed, however now that it is at a smaller width, it does not look as good on pc. It would be great if you could lend some CSS help. Would there be a way to keep the original width of the search bar that was shown in the previous image / code for pc and the newly changed search bar for mobile? Thank you for the help!

I figured my mistake! By setting the search bar to fill it works perfectly now. My final concern is how can you have the both the title and image on my header to appear on the PC version but only my image to appear on the header for mobile / tablet?