Search Box on Mobile

Unite Theme
1

Hello,

When using Google’s PageSpeed Insights I get a (minor) mark down for mobile user experience due to the width of the search box:

“The page content is 394 CSS pixels wide, but the viewport is only 375 CSS pixels wide. The following elements fall outside the viewport:
The element <span class=“glyphicon glyphicon-search”> falls outside the viewport.”

I notice the result is the same for the theme demo.

Its not a big deal but any way to correct this?

Thank you for your time.

2

Hi @alhaarth,

I hope you are well today and thanks for posting here.

I could confirm the issue on my test site using latest version of Unite theme therefore i have notified the theme developer about this so that it will be fixed in the future version of theme.

In the meanwhile you can try resolving this issue by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Theme Options -> Other -> Custom CSS

@media screen and (max-width: 768px ){
	.widget_search .input-group {
     max-width: 100%;
}
}

Best Regards,
Movin

3

Thank you, Movin.

I can confirm that the temporary fix works well for me. The result saw my PageSpeed Insights User Experience score climb to 99 and it looks much nicer now too.

Much appreciated.

4

You are most welcome here :slight_smile: