Site logo

Archived topic

Overflow problem with GP Premium Alpha 2

2 replies · Started by Ryan on March 2, 2021

Viewing posts 1–3 of 3

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>

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.

Nice catch. Have you fully sorted this out?

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

This archived topic is closed to new replies.