[Resolved] Overflow problem with GP Premium Alpha 2

[Ryan]

I’m having an issue with a large overflow to the right with a new footer I created using the GP Blocks and the new GP Premium 2. I can’t quite figure out what is causing the overflow, but I narrowed it down to the follow code for a grid block in my footer. The overflow is only visible when using the mobile/responsive inspector in Chrome. If I delete this element in the Chrome inspector the overflow issue goes away. Setting overflow-x:hidden to the footer doesn’t solve the issue, I can’t figure it out.
https://www.ryansmithphotography.com/

<div class="gb-grid-wrapper gb-grid-wrapper-81c0f157">
<div class="gb-grid-column gb-grid-column-8fd57045"><div class="gb-container gb-container-8fd57045"><div class="gb-inside-container">
<form role="search" method="get" action="https://www.ryansmithphotography.com/" class="wp-block-search__button-inside wp-block-search__icon-button aligncenter mbs wp-block-search i-amphtml-form" target="_top" novalidate=""><label for="wp-block-search__input-1" class="wp-block-search__label screen-reader-text">Search</label><div class="wp-block-search__inside-wrapper"><input type="search" id="wp-block-search__input-1" class="wp-block-search__input" name="s" value="" placeholder="Search" required=""><button type="submit" class="wp-block-search__button has-icon"><svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24">
			        <path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
			    </svg></button></div></form>

<div class="wp-block-buttons is-content-justification-center">
<div class="wp-block-button"><a class="wp-block-button__link" href="https://www.ryansmithphotography.com/please-get-in-touch/">Please Get in Touch</a></div>
</div>

</div></div></div>

<div class="gb-grid-column gb-grid-column-517436a9"><div class="gb-container gb-container-517436a9"><div class="gb-inside-container">

<ul class="underline-links"><li><a href="https://www.ryansmithphotography.com/myrtle-beach-wedding-photography/">Wedding Photography</a></li><li><a href="https://www.ryansmithphotography.com/engagement-portrait-prices/">Engagement Photography</a></li><li><a href="https://www.ryansmithphotography.com/family-photographer-prices/">Family Portraits</a></li><li><a href="https://www.ryansmithphotography.com/myrtle-beach-real-estate-photography/">Real Estate Photography</a></li><li><a href="https://www.ryansmithphotography.com/reviews-and-testimonials/">Testimonials</a></li><li><a href="https://www.ryansmithphotography.com/blog/">Blog</a></li></ul>

</div></div></div>

<div class="gb-grid-column gb-grid-column-886f9da5"><div class="gb-container gb-container-886f9da5"><div class="gb-inside-container">
<div class="gb-grid-wrapper gb-grid-wrapper-bdd27849">
<div class="gb-grid-column gb-grid-column-5284635f"><div class="gb-container gb-container-5284635f"><div class="gb-inside-container">

<div class="wp-block-image"><figure class="aligncenter"><a href="https://www.theknot.com/marketplace/ryan-smith-photography-myrtle-beach-sc-521207" target="_blank" rel="nofollow noopener"><amp-img width="250" height="250" src="https://www.ryansmithphotography.com/wp-content/uploads/2021/01/The-Knot-Best-of-Weddings-2021.png" alt="The Knot Best of Weddings 2021" class="wp-image-60623 amp-wp-enforced-sizes i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-element i-amphtml-built i-amphtml-layout" layout="intrinsic" i-amphtml-layout="intrinsic"><i-amphtml-sizer class="i-amphtml-sizer" slot="i-amphtml-svc"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzI1MCcgd2lkdGg9JzI1MCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB2ZXJzaW9uPScxLjEnLz4="></i-amphtml-sizer><noscript><img loading="lazy" width="250" height="250" src="https://www.ryansmithphotography.com/wp-content/uploads/2021/01/The-Knot-Best-of-Weddings-2021.png" alt="The Knot Best of Weddings 2021" class="wp-image-60623"></noscript><img decoding="async" alt="The Knot Best of Weddings 2021" src="https://www.ryansmithphotography.com/wp-content/uploads/2021/01/The-Knot-Best-of-Weddings-2021.png" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img></a></figure></div>

</div></div></div>

<div class="gb-grid-column gb-grid-column-68bcf8b8"><div class="gb-container gb-container-68bcf8b8"><div class="gb-inside-container">

<div class="wp-block-image"><figure class="aligncenter"><a href="https://www.weddingwire.com/biz/ryan-smith-photography-myrtle-beach/1d69d8a8f173ec3f.html" target="_blank" rel="nofollow noopener"><amp-img width="250" height="250" src="https://www.ryansmithphotography.com/wp-content/uploads/2021/01/2020-couples-choice-award.png" alt="Weddingwire 2020 couples choice award" class="wp-image-60624 amp-wp-enforced-sizes i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-element i-amphtml-built i-amphtml-layout" layout="intrinsic" i-amphtml-layout="intrinsic"><i-amphtml-sizer class="i-amphtml-sizer" slot="i-amphtml-svc"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzI1MCcgd2lkdGg9JzI1MCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB2ZXJzaW9uPScxLjEnLz4="></i-amphtml-sizer><noscript><img loading="lazy" width="250" height="250" src="https://www.ryansmithphotography.com/wp-content/uploads/2021/01/2020-couples-choice-award.png" alt="Weddingwire 2020 couples choice award" class="wp-image-60624"></noscript><img decoding="async" alt="Weddingwire 2020 couples choice award" src="https://www.ryansmithphotography.com/wp-content/uploads/2021/01/2020-couples-choice-award.png" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img></a></figure></div>

</div></div></div>
</div>
</div></div></div>
</div>

[Ryan]

I actually narrowed the problem down to the search form in my footer. It was a basic wordpress block search form, but changing the search box option from button inside to button outside solved the problem. I have no idea why I just kept deleting elements in Chrome until I narrowed down the issue.

[Elvin]

Nice catch. Have you fully sorted this out?

Glad you narrowed it down. Let us know if you need further help.

[Author]

Posts